Savybė transition

Savybė transition yra sutrumpinimas sklandiems perėjimams, leidžia vienu metu nustatyti transition-duration, transition-property, transition-timing-function ir transition-delay.

Sintaksė

selektorius {
	transition: reikšmė;
}

Savybių tvarka neturi reikšmės, tačiau vykdymo laikas (transition-duration) turi būti prieš delsą (transition-delay).

Reikšmės

Žr. atitinkamas savybes. Numatytoji reikšmė: all 0s ease 0s.

Reikšmė none atšaukia visus perėjimus (jie vyks akimirksniu).

Pavyzdys

Užveskite pelės žymeklį ant bloko - 3 sekundes nieko neatsitiks (yra 3 s delsos), o tada jis sklandžiai pakeis savo plotį per 2 sekundes. Jei tada pašalinsite pelės žymeklį - vėl 3 sekundes nieko neatsitiks, o tada plotis sklandžiai sumažės iki pradinės reikšmės:

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

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

Taip pat žiūrėkite

savybė animation,
kurios pagalba galima sukurti animaciją