animation-duration

Содержание

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

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

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

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

Синтаксис

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

Значения

См. время.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-duration</title>
  <style>
   .warn {
    background: #fc0;
    padding: 10px;
   }
   .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    animation-name: fadeInLeft;
    animation-duration: 1s;
   }
   @-webkit-keyframes fadeInLeft {
    from {
     opacity: 0;
     transform: translateX(-2000px);
    }
    to {
     opacity: 1;
     transform: none;
    }
   }
   @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, Safari и Android поддерживают свойство -webkit-animation-duration.

Opera до версии 12.10 поддерживает свойство -o-animation-duration.

Firefox до версии 16 поддерживает свойство -moz-animation-duration.

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

СпецификацияСтатус
CSS AnimationsРабочий проект

Браузеры

Internet ExplorerChromeOperaSafariFirefox
1031212.104516
AndroidFirefox MobileOpera MobileSafari Mobile
25161212.104




Рекомендую хостинг: beget.ru

Сервер падал:27 дн. 19:18 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru