Свойство animation-duration устанавливает время выполнения анимации.
Данное свойство входит в свойство-сокращение animation.
См. все свойства для CSS анимации animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes.
См. также transition - плавные переходы (анимация по наведению на элемент).
Синтаксис
селектор {
animation-duration: время в s или ms;
}
Для добавления нескольких анимаций следует задавать значения через запятую:
селектор {
animation-duration: 2s, 3s;
}
Значения
Значение | Описание |
---|---|
s | Задает время в секундах (например 3s). |
ms | Задает время в миллисекундах (например 3ms). Одна секунда - это 1000 миллисекунд. |
Значение по умолчанию: 0s.
Примеры
Внимание! Кроссбраузерные приставки для анимации опущены для краткости, но они нужны! Как сделать кроссбраузерно смотрите по ссылке keyframes.
Пример
В данном примере анимация будет проигрываться в течении 3-х секунд:
@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;
}
Результат выполнения кода:
Пример . Несколько анимаций сразу
В данном примере будет две анимации: движение будет проигрываться в течении 6-х секунд, а фон будет меняться в течении 3-х.
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
@keyframes bg {
from {
background-color: red;
}
to {
background-color: white;
}
}
#elem {
animation-duration: 6s, 3s;
animation-name: move, bg;
animation-iteration-count: infinite, infinite;
animation-timing-function: linear, ease;
border: 1px solid black;
width: 50px;
height: 50px;
}
Результат выполнения кода: