Properti transition

Properti transition adalah singkatan untuk transisi halus, memungkinkan untuk menetapkan secara bersamaan transition-duration, transition-property, transition-timing-function dan transition-delay.

Sintaksis

cssselektor {
  transition: nilai;
}

Urutan properti nilainya tidak penting, namun waktu eksekusi (transition-duration) harus ditempatkan sebelum penundaan (transition-delay).

Nilai

Lihat properti yang sesuai. Nilai default: all 0s ease 0s.

Nilai none membatalkan semua transisi (mereka akan terjadi secara instan).

Contoh

Arahkan kursor mouse ke blok - 3 detik tidak akan terjadi apa-apa (terdapat penundaan 3s), kemudian lebarnya akan berubah secara halus selama 2 detik. Jika kemudian kursor mouse dijauhkan - maka kembali 3 detik tidak akan terjadi apa-apa, kemudian lebar akan berkurang secara halus ke nilai aslinya:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Lihat juga