Eienskap animation-delay
Die eienskap animation-delay stel
'n vertraging voor die aanvang van die animasie in.
Sintaksis
selektor {
animation-delay: tyd in s of ms;
}
Waardes
| Waarde | Beskrywing |
|---|---|
s |
Spesifiseer tyd in sekondes (byvoorbeeld 3s). |
ms |
Spesifiseer tyd in millisekondes (byvoorbeeld 3ms). Een sekonde is 1000 millisekondes. |
Verstekwaarde: 0s.
Voorbeeld
In hierdie voorbeeld sal daar 'n vertraging van
3 sekondes wees voor die animasie begin:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-delay: 3s;
animation-duration: 6s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Sien ook
-
die eienskap
animation-name,
wat die naam van die animasie spesifiseer -
die eienskap
animation-duration,
wat die tydsduur van die animasie spesifiseer -
die eienskap
animation-timing-function,
wat die spoed van die animasie-uitvoering spesifiseer -
die eienskap
animation-iteration-count,
wat die aantal herhalings van die animasie spesifiseer -
die eienskap
animation-direction,
wat die rigting van die animasie spesifiseer -
die eienskap
animation-fill-mode,
wat die toestand van die animasie spesifiseer -
die eienskap
animation-play-state,
wat toelaat om die animasie te onderbreek -
die eienskap
animation,
wat 'n kortnotasie vir animasies is -
die opdrag
@keyframes,
wat die sleutelframe van die animasie spesifiseer -
gladde oorgange
transition, wat 'n animasie is wanneer daar oor 'n element beweeg word