Właściwość transition

Właściwość transition - skrót dla płynnych przejść, pozwala jednocześnie ustawić transition-duration, transition-property, transition-timing-function i transition-delay.

Składnia

selektor {
	transition: wartość;
}

Kolejność właściwości nie ma znaczenia, jednak czas trwania (transition-duration) musi występować przed opóźnieniem (transition-delay).

Wartości

Zobacz odpowiednie właściwości. Wartość domyślna: all 0s ease 0s.

Wartość none anuluje wszystkie przejścia (będą one odbywać się natychmiast).

Przykład

Najedź myszką na blok - przez 3 sekundy nic się nie będzie działo (ustawiono opóźnienie 3s), a następnie płynnie zmieni on swoją szerokość przez 2 sekundy. Jeśli następnie odsuniesz mysz - to znowu przez 3 sekundy nic się nie będzie działo, a następnie szerokość płynnie zmniejszy się do wartości początkowej:

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

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

Zobacz także

właściwość animation,
za pomocą której można stworzyć animację