Properti animation-timing-function digunakan untuk menentukan fungsi pengaturan waktu yang menentukan kecepatan dari waktu ke waktu objek yang dianimasikan. Ini menjelaskan bagaimana animasi akan berkembang selama satu siklus durasinya, memungkinkannya untuk mengubah kecepatan selama perjalanannya.

Fungsi pengaturan waktu dalam CSS biasanya disebut fungsi pelonggaran.

Fungsi animasi-waktu-mengambil fungsi waktu sebagai nilai, yang merupakan fungsi matematika yang menentukan kecepatan dari waktu ke waktu objek yang dianimasikan. Itu juga dapat didefinisikan menggunakan salah satu dari beberapa kata kunci yang telah ditentukan sebelumnya untuk fungsi waktu yang umum.

Jika kalian menerapkan lebih dari satu animasi pada suatu elemen, kalian dapat menentukan beberapa animation-timing-function, masing-masing untuk animasi yang sesuai yang ditentukan menggunakan properti nama-animasi.

Fungsi timing function yang ditentukan berlaku untuk setiap iterasi animasi, bukan seluruh animasi secara penuh. Misalnya, jika animasi memiliki animation-timing-function: ease-in-out; and animation-iteration-count: 2;,

itu akan memudahkan pada awal, memudahkan keluar saat mendekati akhir iterasi pertama, kemudahan pada awal iterasi kedua, dan memudahkan keluar saat mendekati akhir animasi.

Untuk animasi keyframed, fungsi waktu berlaku antara keyframe daripada seluruh animasi. Dengan kata lain, fungsi pengaturan waktu diterapkan pada awal bingkai kunci dan pada akhir bingkai kunci.

Selain dapat menentukan fungsi pengaturan waktu untuk animasi secara keseluruhan, Anda dapat menentukan fungsi pengaturan waktu animasi untuk masing-masing kerangka kunci animasi di dalam aturan kerangka kunci yang digunakan untuk menggerakkan elemen dalam kerangka kunci itu saat melanjutkan ke kerangka kunci berikutnya (Lihat bagian Contoh di bawah untuk contoh). Jika tidak ada fungsi pengaturan waktu yang ditentukan untuk bingkai kunci, fungsi pengaturan waktu yang ditentukan untuk keseluruhan animasi digunakan. Anda dapat membaca lebih lanjut tentang ini dan melihat contoh di entri @keyframes.

Biasanya lebih mudah untuk menentukan fungsi waktu-animasi di properti shorthand animation.

Official Syntax:

animation-timing-function : <timing-function>

Berlaku untuk seluruh element, dan berlaku juga untuk pseudo-class ::before dan ::after.

Penjelasan Values:

<timing-function>: Entri <timing-function> untuk daftar nilai yang mungkin, penjelasan terperinci untuk masing-masing, dan contoh dan demo untuk setiap nilai.

Contoh:

Contoh berikut menerapkan fungsi <timing-function> untuk animasi yang diterapkan pada dua animasi yang diterapkan pada suatu elemen:

Contoh berikut menerapkan fungsi <timing-function> untuk masing-masing kerangka kunci di dalam aturan @keyframes: