Trình tạo CSS Animation cho những người lười biếng.
Hoạt ảnh CSS
CSS cho phép tạo hoạt ảnh cho các phần tử HTML mà không cần sử dụng JavaScript hoặc Flash
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:
- @keyframes
- tên hoạt hình
- Thời lượng hoạt ảnh
- hoạt ảnh-độ trễ
- hoạt-động-lặp-đếm
- hướng hoạt hình
- hoạt hình-thời gian-chức năng
- hoạt hình-điền-chế độ
- hoạt hình
Tiền tố cụ thể của trình duyệt
Một số trình duyệt cũ hơn cần các tiền tố cụ thể (-webkit-) để hiểu các thuộc tính hoạt ảnh
CSS Animations là gì?
Hoạt ảnh cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác.
Bạn có thể thay đổi bao nhiêu thuộc tính CSS mà bạn muốn, bao nhiêu lần bạn muốn.
Để sử dụng hoạt ảnh CSS, trước tiên bạn phải chỉ định một số khung hình chính cho hoạt ảnh.
Khung hình chính giữ kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định.
Quy tắc @keyframes
Khi bạn chỉ định kiểu CSS bên trong quy tắc @keyframes, hoạt ảnh sẽ dần thay đổi từ kiểu hiện tại sang kiểu mới tại một số thời điểm nhất định.