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

Свойство animation-duration определяет время (в секундах или миллисекундах), необходимое анимации для выполнения одного цикла. Очень часто используется сокращённое свойство animation, позволяющее задать все свойства анимации одновременно. Значение по умолчанию для animation-duration равно 0s, что означает мгновенное завершение анимации и отсутствие видимого эффекта от ключевых кадров. Отрицательные значения недопустимы и приводят к игнорированию свойства. Однако некоторые более ранние реализации могут трактовать их как эквивалентные 0s.

Если для любого свойства анимации указано несколько значений через запятую, они применяются по порядку к соответствующим анимациям, определённым в animation-name. Если значений больше, чем имён анимаций, значения начинают применяться заново с начала.

Свойство animation-duration относится к свойствам CSS3.

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

Синтаксис

Синтаксис свойства CSS animation-duration

css

animation-duration: time | initial | inherit;

Пример использования свойства animation-duration:

Пример использования свойства CSS animation-duration с секундами

html

<!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">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

Try it Yourself »

Пример свойства animation-duration с длительностью 6 секунд:

Пример использования свойства CSS animation-duration с длительностью 6 секунд

html

<!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>

Try it Yourself »

Значения

Значение	Описание	Запустить
time	Указывает время, необходимое анимации для выполнения одного цикла. Значения могут быть заданы в секундах (`s`) или миллисекундах (`ms`). Обратите внимание, что значением по умолчанию для самого свойства является `0s`, а не ключевое слово `time`.	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какова роль свойства CSS animation-duration и как оно указывается?

Свойство CSS animation-duration используется для определения количества секунд или миллисекунд, необходимых анимации для выполнения полного цикла.Свойство CSS animation-duration используется для установки цвета анимации в CSS.Свойство CSS animation-duration указывается в процентах.Свойство CSS animation-duration указывается в секундах (s) или миллисекундах (ms).Свойство CSS animation-duration отвечает за определение направления анимации в CSS.

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

Синтаксис ​

Пример использования свойства animation-duration: ​

Пример свойства animation-duration с длительностью 6 секунд: ​