Sifat transition-delay

Sifat transition-delay menetapkan kelewatan sebelum memulakan peralihan lancar transition.

Sintaks

pemilih {
	transition-delay: masa dalam s atau ms;
}

Nilai

Nilai	Keterangan
`s`	Menetapkan masa dalam saat (contohnya `3s`). Boleh menetapkan nilai pecahan, contohnya, `0.5s` - setengah saat.
`ms`	Menetapkan masa dalam milisaat (contohnya `3ms`). Satu saat ialah `1000` milisaat.

Nilai lalai: 0s.

Contoh

Letakkan kursor 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-duration: 2s;
	transition-property: width;
	transition-delay: 3s;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Contoh

Letakkan kursor tetikus di atas blok - ia pertama kali akan mengubah lebarnya dalam 2 saat, kemudian akan mengubah tingginya dalam 4 saat. Sifat-sifat akan berubah secara berurutan, kerana untuk tinggi ditetapkan kelewatan 3 saat (masa perubahan lebar). Jika mengalihkan tetikus - perubahan akan berlaku dalam urutan terbalik: pertama lebar akan berkurang, kemudian tinggi akan berkurang:

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

#elem {
	border: 1px solid black;
	transition-duration: 2s, 4s;
	transition-property: width, height;
	transition-delay: 0s, 3s;
	width: 100px;
	height: 25px;
}
#elem:hover {
	width: 400px;
	height: 50px;
}

Lihat juga

sifat transition-property,
yang menetapkan nama sifat untuk peralihan lancar
sifat transition-duration,
yang menetapkan tempoh peralihan lancar
sifat transition-timing-function,
yang menetapkan fungsi masa untuk peralihan lancar
sifat transition,
yang merupakan singkatan untuk peralihan lancar
sifat animation,
yang boleh digunakan untuk membuat animasi