animation-duration

Свойство animation-duration задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации. По умолчанию значение равно 0s, это означает, что никакой анимации нет.

Можно указать несколько значений, перечисляя их через запятую. Отрицательные значения и значения без указания единиц времени (s или ms) недопустимы и будут игнорироваться.

Краткая информация

Значение по умолчанию 0s
Наследуется Нет
Применяется Ко всем элементам, к псевдоэлементам ::before и ::after
Анимируется Нет

Синтаксис

animation-duration: <время> [,<время>]*

Значения

См. время.

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>animation-duration</title>
  <style>
   .warn {
    background: #fc0;
    padding: 10px;
   }
   .fadeInLeft {
    animation-name: fadeInLeft;
    animation-duration: 1s;
   }
   @keyframes fadeInLeft {
    from {
     opacity: 0;
     transform: translateX(-2000px);
    }
    to {
     opacity: 1;
     transform: none;
    }
   }
  </style>
 </head>
 <body>
  <div class="warn fadeInLeft">Вы не учли, что скалярное 
  поле необходимо и достаточно!</div>
 </body>
</html>

Объектная модель

Объект.style.animationDuration

Примечание

  • Chrome до версии 43, Opera до версии 30, Safari до версии 9 и Android до версии 43 поддерживают свойство -webkit-animation-duration.
  • Firefox до версии 16 поддерживает свойство -moz-animation-duration.

Спецификация

Браузеры

10 12 43 30 9 16
43 16 30 9
Анимация