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

Свойство animation-duration CSS задаёт время, необходимое для завершения одного цикла анимации.

Часто удобно использовать сокращённое свойство animation, чтобы задать все свойства анимации одновременно.

Попробуйте

animation-duration: 750ms;

animation-duration: 3s;

animation-duration: 0s;

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

#example-element {
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");

button.addEventListener("click", () => {
  if (el.classList.contains("running")) {
    el.classList.remove("running");
    button.textContent = "Play";
  } else {
    el.classList.add("running");
    button.textContent = "Pause";
  }
});

Синтаксис

/* Single animation */
animation-duration: auto; /* Default */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

/* Global values */
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: revert-layer;
animation-duration: unset;

Значения

Это свойство задаётся списком следующих значений, разделённых запятыми:

auto

Для анимаций, зависящих от времени, auto эквивалентно значению 0s (см. ниже). Для анимаций CSS, управляемых прокруткой auto заполняет анимацией всю временную шкалу.

<time>

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

Если значение не задано, используется значение по умолчанию 0s; в этом случае анимация всё равно выполняется (срабатывают события animationStart и animationEnd). Будет ли анимация видна при значении длительности 0s, зависит от значения animation-fill-mode, как объясняется ниже:

• Если для animation-fill-mode задано значение backwards или both, во время обратного отсчёта animation-delay будет отображаться первый кадр анимации, определённый с помощью animation-direction.
• Если для animation-fill-mode задано значение forwards или both, после истечения animation-delay будет отображаться последний кадр анимации, определённый с помощью animation-direction.
• Если для animation-fill-mode задано значение none, анимация не будет иметь видимого эффекта.

Формальное определение

Формальный синтаксис

animation-duration = 
  [ auto | <time [0s,∞]> ]#

Примеры

Задание длительности анимации

Длительность этой анимации составляет 0,7 секунды.

HTML

<div class="box"></div>

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Результат

Наведите указатель на прямоугольник, чтобы запустить анимацию.

Другие примеры см. в разделе Анимации CSS.

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

Совместимость с браузерами

См. также

• Использование анимаций CSS
• API AnimationEvent JavaScript
• Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-direction, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function