⌘K

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

cssselektor {
  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: 

html<div id="elem"></div>
css#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

BackProperti transition-propertyNextProperti transition