Eienskap transition-duration
Die eienskap transition-duration stel
die tyd vas om die vloeiende oorgang transition uit te voer.
Sintaksis
selektor {
transition-duration: tyd in s of ms;
}
Waardes
| Waarde | Beskrywing |
|---|---|
s |
Stel die tyd in sekondes vas (byvoorbeeld 3s).
Kan desimale waardes spesifiseer,
byvoorbeeld, 0.5s - 'n halwe sekonde.
|
ms |
Stel die tyd in millisekondes vas (byvoorbeeld 3ms).
Een sekonde is 1000 millisekondes.
|
Verstekwaarde: 0s.
Voorbeeld
Beweeg jou muis oor die blok - dit sal sy
wydte geleidelijk verander oor 2 sekondes.
<div id="elem"></div>
#elem {
transition-duration: 2s;
transition-property: width;
border: 1px solid black;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Sien ook
-
die eienskap
transition-property,
wat die naam van die eienskap vir die vloeiende oorgang spesifiseer -
die eienskap
transition-delay,
wat die vertraging voor die vloeiende oorgang spesifiseer -
die eienskap
transition-timing-function,
wat die tydsfunksie vir die vloeiende oorgang spesifiseer -
die eienskap
transition,
wat die afkorting vir die vloeiende oorgang is -
die eienskap
animation,
wat gebruik kan word om animasies te skep