Својство animation-duration
Својството animation-duration го поставува
времето на траење на анимацијата.
Синтакса
селектор {
animation-duration: време во s или ms;
}
Вредности
| Вредност | Опис |
|---|---|
s |
Го одредува времето во секунди (на пример 3s). |
ms |
Го одредува времето во милисекунди (на пример 3ms). Една секунда е 1000 милисекунди. |
Стандардна вредност: 0s.
Пример
Во овој пример анимацијата ќе се репродуцира
во текот на 3 секунди:
<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;
}
:
Погледнете ги исто така
-
својство
animation-name,
кое го задава името на анимацијата -
својство
animation-delay,
кое ја задава задоцнувањето пред извршување на анимацијата -
својство
animation-timing-function,
кое ја задава брзината на извршување на анимацијата -
својство
animation-iteration-count,
кое го задава бројот на повторувања на анимацијата -
својство
animation-direction,
кое ја задава насоката на анимацијата -
својство
animation-fill-mode,
кое го задава состојбата на анимацијата -
својство
animation-play-state,
кое овозможува паузирање на анимацијата -
својство
animation,
кое претставува кратенка за анимации -
команда
@keyframes,
која ги задава клучните кадри на анимацијата -
мазни премини
transition, кои претставуваат анимација при преминување на елементот