Transition īpašība

Īpašība transition ir saīsinājums gludām pārejām, ļauj vienlaicīgi iestatīt transition-duration, transition-property, transition-timing-function un transition-delay.

Sintakse

selector {
	transition: vērtība;
}

Īpašību secībai nav nozīmes, tomēr izpildes laiks (transition-duration) jāatrodas pirms aizkaves (transition-delay).

Vērtības

Skatīties atbilstošās īpašības. Noklusējuma vērtība: all 0s ease 0s.

Vērtība none atceļ visas pārejas (tās notiks acumirklī).

Piemērs

Novietojiet peles kursoru virs bloka - 3 sekundes nekas nenotiks (iestatīta 3 sekunžu aizkave), 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, 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: width 2s ease 3s;
	width: 100px;
	height: 50px;
}
#elem:hover {
	width: 400px;
}

Skatiet arī

īpašība animation,
ar kuras palīdzību var izveidot animāciju