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

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

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

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

Lihat juga

properti animation,
yang dapat digunakan untuk membuat animasi