Sifat transition

Sifat transition - singkatan untuk peralihan lancar, membolehkan anda menetapkan secara serentak transition-duration, transition-property, transition-timing-function dan transition-delay.

Sintaks

penilih {
	transition: nilai;
}

Urutan sifat nilai tidak penting, namun masa pelaksanaan (transition-duration) mesti diletakkan sebelum kelewatan (transition-delay).

Nilai

Lihat sifat yang berkaitan. Nilai asal: all 0s ease 0s.

Nilai none membatalkan semua peralihan (ia akan berlaku serta-merta).

Contoh

Letakkan tetikus di atas blok - 3 saat tiada apa-apa akan berlaku (terdapat kelewatan 3s), kemudian ia akan mengubah lebarnya secara lancar dalam 2 saat. Jika kemudiannya mengalihkan tetikus - sekali lagi 3 saat tiada apa-apa akan berlaku, kemudian lebar akan berkurang secara lancar kepada nilai asal:

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

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

Lihat juga

sifat animation,
yang boleh digunakan untuk membuat animasi