Eienskap transition
Die eienskap transition is 'n afkorting vir
sagte oorgange, dit laat jou toe om gelyktydig
transition-duration,
transition-property,
transition-timing-function
en transition-delay te spesifiseer.
Sintaksis
selektor {
transition: waarde;
}
Die volgorde van die eienskappe maak nie saak nie, maar
die uitvoeringstyd (transition-duration)
moet voor die vertraging (transition-delay) wees.
Waardes
Sien die ooreenstemmende eienskappe. Standaardwaarde:
all 0s ease 0s.
Die waarde none kanselleer alle oorgange
(hulle sal oombliklik plaasvind).
Voorbeeld
Beweeg jou muis oor die blok - vir 3 sekondes
sal niks gebeur nie (daar is 'n vertraging van
3s), en dan sal dit geleidelik sy breedte verander
oor 2 sekondes. As jy dan die muis wegneem
- sal weer vir 3 sekondes niks gebeur nie,
en dan sal die breedte geleidelijk verminder
na die oorspronklike waarde:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
Sien ook
-
die eienskap
animation,
waarmee jy animasies kan maak
