--- title: animation-delay slug: Web/CSS/animation-delay tags: - CSS - CSS-анимации - CSS-свойства translation_of: Web/CSS/animation-delay --- <div>{{CSSRef}}{{SeeCompatTable}}</div> <h2 id="Описание">Описание</h2> <p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-delay</code></strong> определяет время задержки перед стартом анимации.</p> <p>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</p> <p>Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.</p> <p>При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.</p> <p>{{cssinfo}}</p> <h2 id="Синтаксис">Синтаксис</h2> <pre class="brush: css">animation-delay: 3s; animation-delay: 2s, 4ms; </pre> <h3 id="Значения">Значения</h3> <dl> <dt><code><time></code></dt> <dd>Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> {{csssyntax}} <h2 id="Примеры">Примеры</h2> <p>Посмотрите <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS-анимации</a> для примера.</p> <h2 id="Спецификации">Спецификации</h2> {{Specifications}} <h2 id="Browser_compatibility">Совместимость с браузерами</h2> <p>{{Compat}}</p> <h2 id="Смотрите_также">Смотрите также</h2> <ul> <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимаций</a></li> <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> </ul>