I. Định nghĩa và cách sử dụng
Thuộc tính
animation-timing-function xác định độ mềm mại của chuyển động trong quá trình chuyển động của selector.
Độ mềm mại được xác định LÚC mà một chuyển động thay đổi từ một bộ CSS ban đầu sang một bộ CSS khác.
Độ mềm mại được sử dụng để thực hiện những thay đổi một cách trơn tru/mềm mại/uốn éo/bla bla.
Giá trị mặc định:
ease
II. Các trình duyệt hỗ trợ
Thuộc tính
|
|
|
|
|
|
animation-timing-function
| 4.0 -webkit-
| 10.0
| 16.0
5.0 -moz-
| 4.0 -webkit-
| 15.0 -webkit-
12.1
12.0 -o- |
III. Cú pháp CSS
animation-timing-function: <linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit>;
Thuộc tính
animation-timing-function sử dụng một hàm toán học, được gọi là đường cong (đồ thị)
Bezier Cubic, để làm cho chuyển động diễn ra một cách mềm mại. Bạn vẫn có thể sử dụng những giá trị của riêng bạn trong chức năng này, hoặc sử dụng một trong các giá trị được xác định trước ở dưới đây
IV. Ý nghĩa các giá trị thuộc tính
Giá trị
| Mô tả
|
linear
| Chuyển động có tốc độ giống nhau (tương đương nhau) từ đầu đến cuối
|
ease
| Đây là giá trị mặc định. Chuyển động bắt đầu một cách chậm chạp, sau đó thì nhanh dần, trước khi nó kết thúc một cách dần dần và từ từ.
|
ease-in
| Chuyển động bắt đầu một cách chậm chạp, dần dần và từ từ.
|
ease-out
| Chuyển động kết thúc một cách chậm chạp, dần dần và từ từ.
|
ease-in-out
| Chuyển động có cả bắt đầu và kết thúc một cách chậm chạp, dần dần và từ từ.
|
cubic-bezier(n,n,n,n)
| Xác định những giá trị của riêng bạn trong các phương trình đồ thị cubic-bezier. Giá trị có thể là giá trị số 0 - 1 (Lưu ý: Giá trị này rất khó để sử dụng)
|
initial
| Thiết lập lại thuộc tính mặc định của nó
|
inherit
| Thừa hưởng lại giá trị từ selector bọc bên ngoài.
|
|
V. Mở rộng
So sánh các giá trị
animation-timing-function:
Dành cho bạn nào muốn tìm hiểu về giá trị đồ thị
cubic-bezier:
(Hình ảnh do mình tự chụp trên đồ thị)
linear : cubic-bezier(0,0,0.25,1)
| ease : cubic-bezier(0.25,0.1,0.25,1)
|
ease-in : cubic-bezier(0.42,0,1,1);
| ease-out : cubic-bezier(0,0,0.58,1)
|
|
ease-in-out : cubic-bezier(0.42,0,0.58,1)
Đánh dấu