Trang chủ
CSS
Hoạt ảnh CSS
Dùng thử: Sử dụng thuộc tính animation-direction
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> div { width: 100px; chiều cao: 100px; màu nền: đỏ; vị trí: tương đối; tên hoạt hình: ví dụ; thời lượng hoạt ảnh: 4 giây; hoạt hình-lặp-đếm: 2; hướng hoạt hình: thay thế; } Ví dụ về @keyframes { 0% {background-color:red; trái:0px; top:0px;} 25% {màu nền:màu vàng; trái:200px; top:0px;} 50% {background-color:blue; trái:200px; top:200px;} 75% {background-color:green; trái:0px; top:200px;} 100% {background-color:red; trái:0px; top:0px;} } </style> </head> <body> <h1>Hoạt hình CSS</h1> <p>Thuộc tính animation-direction chỉ định xem một hoạt ảnh nên được phát tiến, lùi hay theo chu kỳ thay thế. Ví dụ sau sử dụng giá trị "thay thế" để làm cho hoạt ảnh chạy tiến trước, sau đó chạy lùi:</p> <div></div> </body> </html>