animation-delay

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨сентябрь 2015 г.⁩.

Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

CSS свойствоanimation-delay определяет время задержки перед стартом анимации.

Интерактивный пример

animation-delay: 250ms;

animation-delay: 2s;

animation-delay: -2s;

<section>  <div>Animation <span></span></div>  <div>Select a delay to start!</div></section>

#example-element {  background-color: #1766aa;  color: white;  margin: auto;  margin-left: 0;  border: 5px solid #333;  width: 150px;  height: 150px;  border-radius: 50%;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;}#playstatus {  font-weight: bold;}.animating {  animation-name: slide;  animation-duration: 3s;  animation-timing-function: ease-in;  animation-iteration-count: 2;  animation-direction: alternate;}@keyframes slide {  from {    background-color: orange;    color: black;    margin-left: 0;  }  to {    background-color: orange;    color: black;    margin-left: 80%;  }}

"use strict";window.addEventListener("load", () => {  const el = document.getElementById("example-element");  const status = document.getElementById("playstatus");  function update() {    status.textContent = "delaying";    el.className = "";    window.requestAnimationFrame(() => {      window.requestAnimationFrame(() => {        el.className = "animating";      });    });  }  el.addEventListener("animationstart", () => {    status.textContent = "playing";  });  el.addEventListener("animationend", () => {    status.textContent = "finished";  });  const observer = new MutationObserver(() => {    update();  });  observer.observe(el, {    attributes: true,    attributeFilter: ["style"],  });  update();});

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

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

Начальное значение	`0s`
Применяется к	все элементы,`::before` и`::after`псевдоэлементы
Наследуется	нет
Обработка значения	как указано
Animation type	Not animatable

Синтаксис

css

animation-delay: 3s;animation-delay: 2s, 4ms;

Значения

<time>: Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.