animation-delay

Базовая линия Широко доступная

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

Свойство animation-delay CSS задаёт время ожидания, которое должно пройти с момента применения анимации к элементу до начала её выполнения. Анимация может начать выполняться позже, сразу с начала или сразу, но с определённой точки анимации.

Попробовать

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

Синтаксис

/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* Multiple animations */
animation-delay: 2.1s, 480ms;

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

Значения

<time>

Смещение времени от момента применения анимации к элементу до начала выполнения анимации. Это значение может быть задано в секундах (s) или миллисекундах (ms). Единица измерения обязательна.

Положительное значение указывает, что анимация должна начаться после указанного интервала времени. Значение 0s, которое является значением по умолчанию, указывает, что анимация должна начаться сразу после применения.

Отрицательное значение вызывает начало анимации сразу, но с определённой точки её цикла. Например, если вы задаёте -1s в качестве времени задержки анимации, анимация начнется сразу, но начнется со 1 секунды последовательности анимации. Если вы задаете отрицательное значение для задержки анимации, но начальное значение неявно, начальное значение берется с момента применения анимации к элементу.

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

Примечание: animation-delay не влияет на анимации прокрутки CSS.

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

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

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

animation-delay = 
  <time>#

Примеры

Установление задержки анимации

Эта анимация имеет задержку 2 секунды.

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;
  animation-delay: 2s;
}

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

Результат

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

См. Анимации CSS для примеров.

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

Спецификация
CSS Анимации Уровень 1 # animation-delay

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`animation-delay`	433	1212	16 До Firefox 57, Firefox не перерисовывает элементы за пределами области просмотра, которые анимируются в область просмотра с задержкой. Эта ошибка влияет только на некоторые платформы, такие как Windows. 495	301512.1–1512–15	94	4318	16495	301412.1–1412–14	93.2	4.01.0	434.4

См. также

Использование CSS анимаций
JavaScript AnimationEvent API
Другие связанные свойства анимации: animation, animation-composition, animation-direction, animation-duration, 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-delay