Omadus animation-duration
Omadus animation-duration määrab
animatsiooni kestvuse.
Süntaks
valija {
animation-duration: aeg s või ms;
}
Väärtused
| Väärtus | Kirjeldus |
|---|---|
s |
Määrab aja sekundites (näiteks 3s). |
ms |
Määrab aja millisekundites (näiteks 3ms). Üks sekund on 1000 millisekundit. |
Vaikeväärtus: 0s.
Näide
Selles näites mängitakse animatsiooni läbi
3 sekundi jooksul:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Vaata ka
-
omadus
animation-name,
mis määrab animatsiooni nime -
omadus
animation-delay,
mis määrab viivituse enne animatsiooni käivitamist -
omadus
animation-timing-function,
mis määrab animatsiooni kiiruse -
omadus
animation-iteration-count,
mis määrab animatsiooni korduste arvu -
omadus
animation-direction,
mis määrab animatsiooni suuna -
omadus
animation-fill-mode,
mis määrab animatsiooni oleku -
omadus
animation-play-state,
mis võimaldab animatsiooni peatada -
omadus
animation,
mis on lühend animatsioonide jaoks -
käsk
@keyframes,
mis määrab animatsiooni võtmeraamid -
sujuvad ülemineked
transition, mis on animatsioon elemendi peale hiirega minnes