Properti transition-timing-function

Properti transition-timing-function mengatur kecepatan perubahan (akselerasi) transisi halus transition. Contohnya, pertama lambat, lalu cepat, kemudian lambat lagi dan seterusnya.

Sintaks

selektor {
	transition-timing-function: nilai;
}

Nilai

Nilai	Keterangan
`ease`	Pertama lambat, lalu cepat, di akhir kembali lambat.
`ease-in`	Dimulai secara lambat dan secara bertahap dipercepat.
`ease-out`	Dimulai dengan cepat dan secara bertahap berhenti.
`ease-in-out`	Pertama lambat, lalu cepat, di akhir kembali lambat. Berbeda dengan ease dalam hal kecepatan.
`linear`	Selalu dengan kecepatan yang sama.
`step-start`	Tidak ada animasi, properti langsung mengambil nilai akhir.
`step-end`	Tidak ada animasi, properti menunggu waktu yang ditentukan dalam `transition-duraton`, kemudian langsung mengambil nilai akhir secara instan.
`steps`	Nilai properti berubah secara bertahap (melompat).
`cubic-bezier`	Kurva Bezier yang dapat menentukan animasi secara arbitrer. Lihat generator kurva Bezier.

Nilai default: ease.

Perbandingan Berbagai Nilai

Arahkan kursor mouse pada blok-blok di bawah ini, untuk melihat kerja semua jenis fungsi waktu:

Contoh

Arahkan kursor mouse pada blok - blok tersebut akan berubah lebarnya secara halus dalam 2 detik. Karena nilai ease-in yang ditetapkan, maka animasi akan dimulai secara lambat dan akan secara bertahap dipercepat:

<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;
}

Lihat Juga

properti transition-duration,
yang mengatur durasi transisi halus
properti transition-property,
yang mengatur nama properti untuk transisi halus
properti transition-delay,
yang mengatur penundaan sebelum transisi halus
properti transition,
yang merupakan singkatan untuk transisi halus
properti animation,
yang dapat digunakan untuk membuat animasi