Trang chủ
CSS
Hoạt ảnh CSS
Dùng thử: Sử dụng thuộc tính chức năng định thời gian hoạt ảnh
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: 50px; màu nền: đỏ; độ dày phông chữ: đậm; vị trí: tương đối; hoạt hình: mymove 5s; chế độ điền hoạt ảnh: chuyển tiếp; } #div1 {animation-timing-function: tuyến tính;} #div2 {animation-timing-function: easy;} #div3 {animation-timing-function:ease-in;} #div4 {animation-timing-function: easy- out;} #div5 {animation-timing-function:ease-in-out;} @keyframes mymove { từ {left: 0px;} đến {left: 300px;} } </style> </head> <body> < h1>Hoạt hình CSS</h1> <p>Thuộc tính chức năng định giờ hoạt ảnh chỉ định đường cong tốc độ của hoạt ảnh. Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:</p> <div id="div1">tuyến tính</div> <div id="div2">ease</div> <div id=" div3">dễ dàng vào</div> <div id="div4">dễ dàng ra</div> <div id="div5">dễ dàng vào</div> </body> </html>