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

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

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

Попробуйте

animation-delay: 250ms;

animation-delay: 2s;

animation-delay: -2s;

<section class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">Select a delay to start!</div>
</section>

#example-element {
  background-color: #1766aa;
  color: white;
  margin: auto;
  margin-left: 0;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#play-status {
  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%;
  }
}

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

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();

Синтаксис

/* 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>, разделённых запятыми:

<time>

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

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

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

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

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

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
• API JavaScript AnimationEvent
• Другие связанные свойства анимации: animation, animation-composition, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function