X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

43.0+
4.0-42.0 -webkit-
12.0+ 16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-


Считаете ли это полезным?

Похожие статьи