animation-duration

Baseline Широко распространённый

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Свойство animation-duration CSS задаёт продолжительность анимации для одного цикла.

Попробовать

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

Синтаксис

/* 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, анимация не будет отображаться.

Примечание: Отрицательные значения недопустимы, в результате объявление игнорируется. Некоторые ранние префиксные реализации могут рассматривать их как идентичные 0s.

Примечание: При указании нескольких значений через запятую для свойства animation-* они применяются к анимациям в порядке появления значений animation-name. Для ситуаций, где количество анимаций и значений свойства animation-* не совпадают, см. Установка нескольких значений свойств анимации.

Примечание: При создании CSS-анимаций, управляемых прокруткой, указание значения animation-duration в секундах или миллисекундах не имеет смысла. В тестах это, кажется, не влияло на анимации временной шкалы прогресса прокрутки, а на анимации временной шкалы видимости оно, по-видимому, сдвигало анимацию ближе к концу временной шкалы. Однако Firefox требует установить значение animation-duration, для успешного применения анимации. Поэтому рекомендуется установить animation-duration на 1ms, чтобы анимации работали в Firefox, но эффект от этого не сильно изменялся.

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

Начальное значение	`0s`
Применяется к	всем элементам, `::before` и `::after` псевдоэлементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

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

animation-duration = 
  <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 Animations Level 1 # animation-duration

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

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`animation-duration`	433	1212	16495	301512.1–1512–15	94	4318	16495	301412.1–1412–14	94.2	4.01.0	432
`auto`	115	115	Нет Firefox пока не поддерживает значение `auto` и принимает только значения в секундах или миллисекундах. Рекомендуется использовать 1мс, пока `auto` не будет поддерживаться.	101	Нет	115	Нет Firefox пока не поддерживает значение `auto` и принимает только значения в секундах или миллисекундах. Рекомендуется использовать 1мс, пока `auto` не будет поддерживаться.	77	Нет	23.0	115

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration