Īpašība transition-delay

Īpašība transition-delay iestata aizturi pirms gludās pārejas transition palaišanas.

Sintakse

selektors {
	transition-delay: laiks s vai ms;
}

Vērtības

Vērtība	Apraksts
`s`	Norāda laiku sekundēs (piemēram, `3s`). Var norādīt daļējas vērtības, piemēram, `0.5s` - puse sekundes.
`ms`	Norāda laiku milisekundēs (piemēram, `3ms`). Viena sekunde ir `1000` milisekundes.

Noklusējuma vērtība: 0s.

Piemērs

Novietojiet peles kursoru virs bloka - 3 sekundes nekas nenotiks (iestatīta aizkave 3s), un pēc tam tas gludi mainīs savu platumu 2 sekunžu laikā. Ja pēc tam noņemsit peles kursoru - atkal 3 sekundes nekas nenotiks, un pēc tam platums gludi samazināsies līdz sākotnējai vērtībai:

<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;
}

Piemērs

Novietojiet peles kursoru virs bloka - tas vispirms mainīs savu platumu 2 sekunžu laikā, un pēc tam mainīs savu augstumu 4 sekunžu laikā. Īpašības mainīsies secīgi, jo augstumam iestatīta aizkave 3 sekundes (platuma maiņas ilgums). Ja noņemsit peles kursoru - tad izmaiņas notiks apgrieztā secībā: vispirms samazināsies platums, un pēc tam samazināsies augstums:

<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;
}

Skatiet arī

īpašība transition-property,
kura norāda īpašības nosaukumu gludai pārejai
īpašība transition-duration,
kura norāda gludās pārejas ilgumu
īpašība transition-timing-function,
kura norāda laika funkciju gludai pārejai
īpašība transition,
kura ir saīsinājums gludai pārejai
īpašība animation,
ar kuras palīdzību var izveidot animāciju