Hiệu ứng Animation trong CSS

Tổng quan về CSS Animation

Animation (hoạt hình) là quá trình tạo ra hiệu ứng chuyển động và thay đổi giao diện. CSS hỗ trợ nhiều loại hiệu ứng animation khác nhau để kiểm soát chuyển động của các phần tử.

Khái niệm Keyframes

Trong CSS Animation, Keyframes (khung hình chính) đóng vai trò quan trọng. Keyframes cho phép bạn kiểm soát các bước trung gian của animation trong CSS3, định nghĩa trạng thái bắt đầu, kết thúc và các trạng thái trung gian của hiệu ứng.

Cú pháp cơ bản

Ví dụ dưới đây minh họa cách thiết lập chiều cao, chiều rộng, màu sắc, tên và thời gian chạy của animation với cú pháp keyframes:

@keyframes animation {
  from { background-color: pink; }
  to { background-color: green; }
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
}

Giải thích các thuộc tính

• @keyframes: Định nghĩa các khung hình của animation
• from / to: Trạng thái bắt đầu (0%) và kết thúc (100%)
• animation-name: Tên của animation (phải khớp với @keyframes)
• animation-duration: Thời gian chạy của animation (giây hoặc mili-giây)

Mở rộng: Sử dụng phần trăm trong keyframes

Bạn có thể kiểm soát chi tiết hơn bằng cách sử dụng phần trăm:

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); background: blue; }
  100% { transform: translateX(0); background: red; }
}