W3docs
ru
Войти

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

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

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

На этой странице рассматриваются синтаксис, положительные и отрицательные задержки, миллисекунды, поведение задержек при нескольких анимациях, а также соображения доступности, которые необходимо учитывать. Свойство animation-delay является одним из свойств CSS3 и обычно используется вместе со свойствами animation-name и animation-duration.

Зачем использовать animation-delay

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

  • Каскадный эффект — задайте элементам списка возрастающие задержки (0s, 0.1s, 0.2s, …), чтобы они анимировались поочерёдно, а не все сразу.
  • Последовательность — дождитесь окончания анимации одного элемента, прежде чем начнётся анимация другого.
  • Предварительный запуск — используйте отрицательную задержку, чтобы элемент «вошёл» в середину циклически повторяющейся анимации без видимого «рывка» с самого начала.

Как работает значение

Значение по умолчанию — 0s. Значение можно задать в секундах (s) или миллисекундах (ms).

  • Положительное значение (animation-delay: 2s) заставляет браузер ждать указанное время, а затем воспроизводит анимацию с первого ключевого кадра.
  • Значение 0s запускает анимацию немедленно.
  • Отрицательное значение (animation-delay: -2s) запускает анимацию сразу, но так, как если бы она уже проигрывалась в течение указанного времени. Начальная часть анимации пропускается — она никогда не отображается.

Если указано несколько значений через запятую, они циклически сопоставляются с количеством анимаций, перечисленных в animation-name. Например, animation-delay: 0s, 1s применяет 0s к первой анимации и 1s ко второй.

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

Примечание: animation-delay влияет только на первую итерацию. Оно не добавляет паузу между итерациями повторяющейся анимации — для этого необходимо встроить паузу непосредственно в ключевые кадры.

СвойствоЗначение
Начальное значение0s
Применяется кВсем элементам, псевдоэлементам ::before и ::after.
НаследуетсяНет.
АнимируетсяНет.
ВерсияCSS3
DOM Syntaxobject.style.animationDelay = "1s";

Синтаксис

Синтаксис свойства CSS animation-delay

animation-delay: time | initial | inherit;

Пример свойства animation-delay:

Пример свойства CSS animation-delay

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Пример свойства animation-delay с отрицательным значением:

Пример свойства CSS animation-delay с отрицательным значением

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: -2s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example with negative value.</h2>
    <p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Пример свойства animation-delay со значением в миллисекундах:

Пример свойства CSS animation-delay с миллисекундами

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #8ebf42;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 200ms;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example in milliseconds.</h2>
    <p>Here, the animation will start after 200ms.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписаниеПопробуйте
timeЗадаёт количество секунд (s) или миллисекунд (ms) ожидания перед началом анимации. Необязательный параметр.Попробуйте »
initialУстанавливает свойство в значение по умолчанию.
inheritНаследует свойство от родительского элемента.

Доступность

Анимации с задержкой и зацикленные анимации могут отвлекать и вызывать дискомфорт у пользователей с вестибулярными расстройствами. Учитывайте системные настройки пользователя с помощью медиазапроса prefers-reduced-motion и отключайте (или уменьшайте) движение по его запросу:

@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

Сокращённая запись

Свойство animation-delay редко задаётся отдельно — как правило, оно является четвёртым значением в сокращённом свойстве animation, которое объединяет все подсвойства анимации:

/* name | duration | timing-function | delay */
div {
  animation: delay 5s ease 3s infinite;
}

Связанные свойства

Практика

Практика
Каково правильное определение свойства CSS animation-delay?
Каково правильное определение свойства CSS animation-delay?
Was this page helpful?