Hoạt hình CSS khung hình chính

CSS là viết tắt của Cascading Style Sheets. Đó là ngôn ngữ biểu định kiểu được sử dụng để mô tả giao diện và định dạng của tài liệu được viết bằng ngôn ngữ đánh dấu. Nó cung cấp một tính năng bổ sung cho HTML, do đó làm cho nó rất hữu ích. Nó thường được sử dụng với HTML để thay đổi kiểu trang web và giao diện người dùng. Trong bài viết này, chúng ta sẽ cố gắng tìm hiểu một phần quan trọng của CSS animation đó là Keyframes

Khung hình chính CSS là gì?

Trong CSS, khung hình chính được sử dụng cho hoạt ảnh. Nó cho phép bạn kiểm soát nhiều hơn hoạt ảnh bạn muốn thực hiện. Hoạt hình được tạo bằng cách thay đổi dần dần từ phong cách này sang phong cách khác. Bạn có thể thay đổi kiểu CSS bao nhiêu lần tùy thích

Đào tạo chứng chỉ Java MIỄN PHÍ

cú pháp

@keyframes [tên]{

từ{

[phong cách];

}

đến{

[phong cách];

}

• Giá trị [name] xác định tên của hoạt ảnh. Bạn có thể đặt tên cho nó bất cứ điều gì bạn muốn
• Giá trị [style] xác định các thuộc tính kiểu CSS

Hãy nhớ rằng những thứ này không có bất kỳ bộ chọn nào trên chúng. Chúng nằm ở thư mục gốc của trang CSS

Chức năng thời gian khung hình chính

Chức năng thời gian được sử dụng để kiểm soát tốc độ hoạt ảnh. Chúng ta có thể sử dụng các giá trị sau để hiểu rõ hơn

• tuyến tính. Nó có nghĩa là quá trình chuyển đổi sẽ không đổi từ đầu đến cuối
• Xoa dịu. Điều đó có nghĩa là hoạt ảnh sẽ bắt đầu chậm, sau một khoảng thời gian, tốc độ sẽ tăng lên và trước khi kết thúc, tốc độ sẽ chậm lại
• Dễ dàng trong. Nó rất giống với sự dễ dàng, nhưng hoạt ảnh sẽ kết thúc nhanh chóng
• dễ dàng ra. Nó rất giống với sự dễ dàng. Sự khác biệt duy nhất là nó bắt đầu nhanh

Khung hình chính CSS Ví dụ 1

Hãy xem một ví dụ cơ bản để hiểu cách hoạt động của khung hình chính.  

Ở đây, chúng tôi đã tạo một hộp có chiều cao và chiều rộng là 200px. Màu sắc của hộp là màu đỏ. Một khung hình chính có tên 'myframes' được tạo sẽ tăng chiều cao của hộp lên 500px

Tên hoạt ảnh chỉ định tên của hoạt ảnh do @keyframes xác định sẽ được áp dụng cho phần tử đã chọn

Thời lượng hoạt ảnh chỉ định số giây hoặc mili giây mà hoạt ảnh cần để hoàn thành một chu kỳ của hoạt ảnh

Hàm thời gian chỉ định cách hoạt ảnh sẽ tiến triển trong khoảng thời gian của mỗi chu kỳ tôi. e. các chức năng nới lỏng

Số lần lặp chỉ định số lần một chu kỳ hoạt hình sẽ được phát trước khi dừng

Khung hình chính CSS Ví dụ 2

trong ví dụ này. chúng ta sẽ thấy một cách đơn giản khác để viết các khung hình chính với nhiều khai báo kiểu

Khóa học Lập trình viên Java Full Stack

Khung hình chính CSS Ví dụ 3

Trong ví dụ này, chúng ta sẽ thấy nhiều khung hình chính với nhiều khai báo kiểu

Kết hợp Transform và Keyframes

Trong ví dụ này, chúng tôi đã kết hợp các khung hình chính với thuộc tính biến đổi để tạo hộp xoay

Có kỹ năng về HTML5 và CSS3 với. Click để xem chi tiết chương trình.  

Phần kết luận

Đến đây, chúng ta đã đi đến phần cuối của bài viết về khung hình chính CSS này. Chúng tôi đã thảo luận về một số ví dụ và thuộc tính hoạt hình để hiểu hoạt động của các khung hình chính. Bằng cách làm việc với các khung hình chính và thuộc tính hoạt hình khác nhau, bạn sẽ có thể hiểu các khái niệm tốt hơn

Nếu bạn có bất kỳ câu hỏi hoặc phản hồi nào liên quan đến bài viết về khung hình chính CSS của chúng tôi, hãy cho chúng tôi biết trong phần nhận xét. Các chuyên gia của chúng tôi sẽ liên hệ lại với bạn trong thời gian sớm nhất

Tìm Full Stack Developer của chúng tôi - MEAN Stack Bootcamp trực tuyến tại các thành phố hàng đầu

Giới thiệu về tác giả

Aryan là một người đam mê công nghệ, thích cập nhật các xu hướng công nghệ ngày nay. Anh ấy đam mê tất cả mọi thứ về công nghệ, một nhà nghiên cứu sắc sảo và viết để truyền cảm hứng. Bên cạnh công nghệ, anh ấy là một cầu thủ bóng đá tích cực và là một người đam mê trò chơi

Hoạt hình CSS khung hình chính là gì?

Làm cách nào để sử dụng CSS khung hình chính?

Các khung hình chính của hoạt ảnh là gì?

Làm cách nào để sắp xếp hoạt hình trong CSS?