Fungsi <timing-function> dalam CSS adalah fungsi (matematis) yang menentukan kecepatan dari waktu ke waktu suatu objek dianimasikan atau ditransisikan dari satu nilai ke nilai lainnya. Ini menjelaskan bagaimana suatu transisi atau animasi akan berkembang selama satu siklus durasinya.

Misalnya, jika Kalian memindahkan objek dari titik A ke titik B, Kalian dapat memindahkannya dalam kecepatan “stabil” linier selama 2 detik misalnya, atau Kalian dapat mengaktifkannya dengan cepat dari titik A hingga itu mencapai setengah jalan dan kemudian secara bertahap melambat sampai mencapai titik B. Ini sama dengan membayangkan diri Kalian mengendarai mobil dari rumah Kalian ke tempat kerja (tentu saja dengan asumsi bahwa Kalian tidak bekerja dari rumah). Katakan Kalian membutuhkan waktu 30 menit untuk sampai ke sana; Kalian dapat berkendara dengan kecepatan konstan, atau Kalian dapat mulai dengan lambat mengetahui bahwa Kalian memiliki banyak waktu tersisa, dan kemudian 20 menit kemudian naikkan kecepatan Kalian untuk memastikan Kalian sampai di sana tepat waktu.

Perubahan kecepatan (akselerasi atau deselerasi) dalam animasi dan transisi CSS ini biasanya ditentukan oleh fungsi timing function yang menggambarkan kecepatan selama suatu periode waktu. Ketika beberapa animator biasanya berbicara tentang “rasa”, “fisika” atau “aliran” dari suatu animasi, mereka mungkin merujuk pada fungsi waktu tertentu yang dipilih untuk mengontrol kecepatan dari waktu ke waktu gerakan tersebut.

Fungsi pewaktuan dalam CSS biasanya merupakan nilai untuk properti fungsi transisi-waktu dan properti fungsi animasi-waktu. Ini digunakan untuk mendefinisikan suatu fungsi yang menggambarkan bagaimana suatu transisi akan berlangsung selama durasinya, yang memungkinkan suatu transisi untuk mengubah kecepatan selama perjalanannya.

Fungsi timing function dalam CSS menjelaskan bagaimana nilai perantara selama transisi akan dihitung, dan biasanya disebut dalam CSS sebagai fungsi pelonggaran.

Menentukan Fungsi timing function

Fungsi timing function dapat didefinisikan dalam salah satu dari tiga cara: menggunakan kata kunci yang telah ditentukan, menggunakan fungsi stepping, atau menggunakan fungsi cubic-bezier. Sintaks resmi adalah sebagai berikut:

 

Langkah-langkah timing function

Fungsi step adalah fungsi pengaturan waktu yang ditentukan oleh angka yang membagi durasi waktu transisi ke dalam interval berukuran sama. Fungsi ini juga menentukan apakah perubahan persentase output terjadi pada awal atau akhir interval. Subkelas fungsi langkah ini kadang-kadang juga disebut fungsi tangga.

Sintaks untuk fungsi ini adalah sebagai berikut:

Fungsi ini mengambil satu atau dua parameter, dipisahkan oleh koma: bilangan bulat positif yang menentukan jumlah interval dalam fungsi, dan nilai opsional mulai atau berakhir, yang menentukan titik di mana perubahan nilai terjadi dalam interval. . Jika tidak ada parameter kedua yang dimasukkan, maka defaultnya akan berakhir.