Thuộc tính Animation

Thuộc tính giá trị Ví dụ Mô tả
animation-name tên animation animation-name: myAnimation; Xác định tên cho một animation.
animation-duration thời gian animation-duration: 5s; Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s.
animation-timing-function linear animation-timing-function: linear; Chuyển động sẽ cùng tốc độ từ lúc bắt đầu tới lúc kết thúc.
ease animation-timing-function: ease; Chuyển động ban đầu sẽ chậm, sau đó nhanh, đến lúc kết thúc sẽ từ từ, đây là dạng mặc định.
ease-in animation-timing-function: ease-in; Chuyển động ban đầu sẽ chậm, sau đó nhanh dần.
ease-out animation-timing-function: ease-out; Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.
ease-in-out animation-timing-function: ease-in-out; Chuyển động ban đầu chậm, sau đó nhanh, đến lúc kết thúc sẽ chậm dần.
cubic-bezier(n,n,n,n) animation-timing-function: cubic-bezier(1,1,1,0); Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.
animation-delay thời gian animation-delay: 3s; Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0
animation-iteration-count số tự nhiên animation-iteration-count: 4; Xác định số lần thực hiện chuyển động.
infinite animation-iteration-count: infinite; Chuyển động sẽ thực hiện không giới hạn số lần.
animation-direction normal animation-direction: normal; Chuyển động bình thường, đây là dạng mặc định.
alternate animation-direction: alternate; Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo.
animation-play-state paused animation-play-state: paused; Xác định chuyển động dừng lại.
running animation-play-state: running; Xác định chuyển động chạy.
animation [name] [duration] [timing] [delay] [interaction-count] [direction] animation: myAnimation 5s linear 3s infinite alternate; Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính animation-play-state.

Tin liên quan

Cách xử lý code SVG bằng tay Cách xử lý code SVG bằng tay Responsive Images trong CSS Responsive Images trong CSS Nâng CSS Shape lên một cấp độ cao hơn Nâng CSS Shape lên một cấp độ cao hơn CSS3 text effects CSS3 text effects