Transition-ominaisuus

Ominaisuus transition on lyhenne sulaville siirtymille, sen avulla voidaan samanaikaisesti asettaa transition-duration, transition-property, transition-timing-function ja transition-delay.

Syntaksi

valitsin {
	transition: arvo;
}

Ominaisuuksien järjestyksellä ei ole merkitystä, kuitenkin suoritusaika (transition-duration) tulee olla ennen viivettä (transition-delay).

Arvot

Katso vastaavat ominaisuudet. Oletusarvo: all 0s ease 0s.

Arvo none peruu kaikki siirtymät (ne tapahtuvat välittömästi).

Esimerkki

Vie hiiri elementin päälle - 3 sekuntia ei tapahdu mitään (viive on 3s), ja sitten se muuttaa sulavasti leveyttään 2 sekunnissa. Jos sitten poistat hiiren - taas 3 sekuntia ei tapahdu mitään, ja sitten leveys pienenee sulavasti takaisin alkuperäiseen arvoonsa:

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

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

Katso myös

ominaisuus animation,
jolla voidaan luoda animaatio