Hiệu ứng hoạt ảnh trong CSS

Hoạt ảnh là quá trình tạo hiệu ứng chuyển động và thay đổi giao diện. CSS hỗ trợ các hiệu ứng hoạt ảnh khác nhau để thay đổi chuyển động của sự kiện.

Trong Animation, một Keyframe khái niệm được sử dụng. Khung hình chính sẽ kiểm soát các bước hoạt ảnh trung gian trong CSS3.

Ví dụ dưới đây hiển thị chiều cao, chiều rộng, màu sắc, tên và thời lượng của hoạt ảnh với cú pháp khung hình chính -

Cú pháp

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}