Thuộc tính transition-timing-function

Thuộc tính transition-timing-function thiết lập tốc độ thay đổi (gia tốc) của quá trình chuyển tiếp mượt transition. Ví dụ, đầu tiên chậm, sau đó nhanh, rồi lại chậm v.v.

Cú pháp

bộ chọn {
	transition-timing-function: giá trị;
}

Giá trị

Giá trị	Mô tả
`ease`	Đầu tiên chậm, sau đó nhanh, cuối cùng lại chậm.
`ease-in`	Bắt đầu chậm và dần dần tăng tốc.
`ease-out`	Bắt đầu nhanh và dần dần dừng lại.
`ease-in-out`	Đầu tiên chậm, sau đó nhanh, cuối cùng lại chậm. Khác với ease ở tốc độ.
`linear`	Luôn cùng một tốc độ.
`step-start`	Không có hoạt ảnh, thuộc tính ngay lập tức nhận giá trị cuối cùng.
`step-end`	Không có hoạt ảnh, thuộc tính chờ đợi khoảng thời gian được đặt trong `transition-duraton`, và sau đó ngay lập tức nhận giá trị cuối cùng.
`steps`	Giá trị của thuộc tính thay đổi theo từng bước nhảy.
`cubic-bezier`	Đường cong Bézier, có thể đặt hoạt ảnh tùy ý. Xem trình tạo đường cong Bézier.

Giá trị mặc định: ease.

So sánh các giá trị khác nhau

Di chuột lên các khối được trình bày dưới đây, để xem hoạt động của tất cả các loại hàm thời gian:

Ví dụ

Di chuột lên khối - nó sẽ thay đổi chiều rộng của mình một cách mượt mà trong 2 giây. Vì giá trị ease-in được đặt, nên hoạt ảnh sẽ bắt đầu chậm và sẽ dần dần tăng tốc:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Xem thêm

thuộc tính transition-duration,
thiết lập thời lượng của quá trình chuyển tiếp mượt
thuộc tính transition-property,
thiết lập tên thuộc tính cho quá trình chuyển tiếp mượt
thuộc tính transition-delay,
thiết lập độ trễ trước quá trình chuyển tiếp mượt
thuộc tính transition,
là cách viết tắt cho quá trình chuyển tiếp mượt
thuộc tính animation,
có thể dùng để tạo hoạt ảnh