Xây dựng animation với CSS rất dễ dàng. Phần thú vị: không cần framework hay plugin bên thứ ba.
Quy tắc @keyframes CSS là công cụ cốt lõi để xây dựng các animation này.
Cú Pháp @keyframes
@keyframes là một CSS at-rule (quy tắc @). At-rule chỉ dẫn CSS nên hành xử thế nào. Có nhiều at-rule khác như @viewport, @supports...
Định nghĩa @keyframes với cú pháp:
@keyframes <name> { from { /* chi tiết bắt đầu */ } to { /* chi tiết kết thúc */ } }
Để animation mượt mà, chi tiết hơn, dùng phần trăm thay vì từ khóa:
@keyframes <name> { 0% { } 50% { } 100% { } }
Lưu ý: Để dùng keyframe vừa tạo, phải gán nó làm giá trị của thuộc tính animation-name. Cũng nên đặt animation-duration để chỉ định thời lượng animation.
Ví Dụ: Quả Cầu Ma Thuật (Magic Ball)
Tạo quả cầu xuất hiện/biến mất. Tham khảo Codepen đi kèm nếu bị lạc.
Bước 1: Định nghĩa animation, đặt tên magic-ball:
@keyframes magic-ball { from { background-color: limegreen; } to { background-color: blueviolet; } }
Đơn giản là chuyển màu nền từ limegreen sang blueviolet. Áp dụng cho bất kỳ phần tử nào, ở đây dùng cho hình tròn.
.circle { width: 10rem; height: 10rem; border-radius: 50%; animation-name: magic-ball; animation-duration: 4s; }
Không quên: Phải gán keyframe vào animation-name và đặt thời lượng bằng animation-duration (giây).
Với animation này, quả cầu của chúng ta đang xuất hiện và biến mất! 🎱
Ví Dụ: Flash Sale (Hiệu Ứng Trượt Vào)
Tạo animation khác: làm vuông di chuyển. Đặt tên moveIn, dùng phần trăm.
@keyframes moveIn { 0% { opacity: 0; transform: translateY(3rem); } 100% { opacity: 1; transform: translate(0); } }
opacity là độ trong suốt. Áp dụng animation cho vuông:
.square { width: 10rem; height: 10rem; background-color: greenyellow; animation-name: moveIn; animation-duration: 4s; }
Bạn thấy với rất ít code đã tạo được hiệu ứng đẹp mắt!
Kết Luận
Bạn có thể tiếp tục hành trình animation bằng cách đọc tài liệu CSS về animations. Cũng lưu ý: chúng ta mới chỉ dùng animation-duration để tinh chỉnh. Còn nhiều sub-properties animation khác đáng để khám phá!
Cuối cùng, hãy nhớ: không phải thuộc tính nào cũng có thể animate được. Xem danh sách đầy đủ các thuộc tính có thể animate tại tài liệu tham khảo.