Properti animation-timing-function

Properti animation-timing-function mengatur kecepatan perubahan (percepatan) animasi. Misalnya, pertama lambat, lalu cepat, kemudian lambat lagi, dan seterusnya.

Sintaks

Nilai

Nilai	Keterangan
ease	Pertama lambat, lalu cepat, di akhir kembali lambat.
ease-in	Dimulai secara perlahan dan secara bertahap semakin cepat.
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 ditetapkan dalam animation-duraton, dan kemudian secara instan mengambil nilai akhir.
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:

Lihat juga