CSS свойство animation-duration

❮ Назад Вперед ❯

CSS свойство animation-duration устанавливает продолжительность анимации (в секундах или миллисекундах), т. е. время, которое требуется для одного цикла анимации. Довольно часто сокращенное свойство animation используется для одновременного установления всех свойств animation. Значение по умолчанию для свойства animation-duration - 0.

Значение по умолчанию	0
Применяется	Ко всем элементам, к псевдоэлементам ::before и ::after.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.animationDuration = "4s";

Синтаксис

animation-duration: time | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
      padding: 50px;
      animation: pulse 7s infinite;
      }
      @keyframes pulse {
      0% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      100% { background-color: #eee }
      }
    </style>
  </head>
  <body>
    <div class="element">Фон этого текста анимируем с помощью CSS3 свойства animation</div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример, где продолжительность анимации 6 секунд:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
      height: 100%;
      margin: 0;
      }
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .element {
      height: 200px;
      width: 200px;
      background-color: #1c87c9;
      animation: nudge 6s ease infinite alternate,
      nudge 6s linear infinite alternate;
      }
      @keyframes nudge {
      0%, 100% { transform: translate(0, 0); }
      60% { transform: translate(150px, 0); }
      80% { transform: translate(-150px, 0); }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
time	Определяет продолжительность времени для одного цикла анимации. Значение может быть установлено в секундах или миллисекундах. Значение по умолчанию - 0.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.