Proprietatea animation-delay
Proprietatea animation-delay stabilește
o întârziere înainte de pornirea animației.
Sintaxă
selector {
animation-delay: timp în s sau ms;
}
Valori
| Valoare | Descriere |
|---|---|
s |
Specifică timpul în secunde (de exemplu 3s). |
ms |
Specifică timpul în milisecunde (de exemplu 3ms). O secundă este 1000 de milisecunde. |
Valoare implicită: 0s.
Exemplu
În acest exemplu, va exista o întârziere de
3 secunde înainte de începerea animației:
<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;
}
:
Veți și
-
proprietatea
animation-name,
care stabilește numele animației -
proprietatea
animation-duration,
care stabilește durata animației -
proprietatea
animation-timing-function,
care stabilește viteza de execuție a animației -
proprietatea
animation-iteration-count,
care stabilește numărul de iterații ale animației -
proprietatea
animation-direction,
care stabilește direcția animației -
proprietatea
animation-fill-mode,
care stabilește starea animației -
proprietatea
animation-play-state,
care permite punerea animației pe pauză -
proprietatea
animation,
reprezentând o prescurtare pentru animații -
comanda
@keyframes,
care stabilește cadrele cheie ale animației -
tranzițiile line
transition, reprezentând o animație la trecerea mouse-ului peste element
