Để tạo animation keyframe trong CSS3, định nghĩa từng keyframe riêng lẻ. Keyframe kiểm soát các bước trung gian của animation trong CSS3.
Dưới đây là tạo keyframe animation với CSS3:
Ví dụ
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: rgb(218, 78, 36); border: 4px solid rgb(0, 0, 0); position: relative; animation: circleMove 5s infinite; } @keyframes circleMove { from { left: 0px; border-radius: 0px; } to { left: 200px; border-radius: 50%; } } </style> </head> <body> <h1>CSS3 keyframe example</h1> <div></div> </body> </html>
Kết quả
Mã trên cho kết quả sau:
Sau một thời gian, hình vuông sẽ biến thành tròn như hình:
