Свойство animation-delay

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

Синтаксис

Значения

Значение	Описание
s	Задает время в секундах (например 3s ).
ms	Задает время в миллисекундах (например 3ms ). Одна секунда — это 1000 миллисекунд.

Значение по умолчанию: 0s .

Пример

В данном примере перед началом анимации будет задержка в 3 секунды:

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < animation-delay: 3s; animation-duration: 6s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Смотрите также

• свойство animation-name ,
  которое задает имя анимации
• свойство animation-duration ,
  которое задает продолжительность анимации
• свойство animation-delay ,
  которое задает задержку перед выполнением анимации
• свойство animation-timing-function ,
  которое задает скорость выполнения анимации
• свойство animation-iteration-count ,
  которое задает количество итераций анимации
• свойство animation-direction ,
  которое задает направление анимации
• свойство animation-fill-mode ,
  которое задает состояние анимации
• свойство animation-play-state ,
  которое позволяет поставить анимацию на паузу
• свойство animation ,
  представляющее собой сокращение для анимаций
• команду @keyframes ,
  задающую ключевые кадры анимации
• плавные переходы transition , представляющие собой анимацию по наведению на элемент

Свойство transition-delay

CSS-анимация не обязательно должна начинаться мгновенно после ее инициализации. Вы можете управлять ее началом с помощью свойства transition-delay . Чтобы отложить совершение перехода на определенное время, укажите его в значении свойства:

transition-delay: 1s; /* отложить начало анимации на одну секунду */

Данное свойство мало используется при реализации простой интерактивности на сайте, однако оно может быть весьма полезным, если вам предстоит создавать более сложные эффекты. По аналогии с transition-duration можно записать время задержки для каждого свойства, указанного в transition-property (при этом также важно придерживаться порядка перечисления):

transition-property: color, background-color, letter-spacing; transition-duration: 1s, .5s, 2s; transition-delay: 0s, 0s, 2s; /* задержка анимации letter-spacing на 2 секунды */

Не забывайте о кроссбраузерности — абсолютно все свойства семейства transition требуют использования вендорных префиксов:

-webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s;

Практическое применение

На практике свойство transition-delay весьма часто применяется при создании выпадающих меню, которые раскрываются при наведении курсора. В данном случае оно записывается не только для начального состояния, но и для конечного.

Возможно, вы замечали, что на некоторых сайтах выпадающие подменю исчезают слишком быстро, при этом сложно поймать нужную ссылку и кликнуть по ней. Предотвратить такое поведение как раз и помогает свойство transition-delay , установленное для обычного элемента и для элемента с псевдоклассом :hover . Значения будут отличаться: для обычного состояния свойство transition-delay должно иметь значение больше нуля, а для состояния наведенного курсора оно должно равняться 0. Пример:

.submenu < opacity: 0; transition-property: all; transition-duration: .5s; transition-delay: 1s; >.menu:hover .submenu

Данный код приведет к тому, что появление меню при наведении курсора будет происходить без задержки, а исчезновение задержится на одну секунду. Такой трюк однозначно сделает меню более удобным для использования.

Как правильно сделать задержку начала анимации в css?

Потому что, во-первых, нет такого свойства -webkit-animation-animation-delay , есть -webkit-animation-delay , а, во-вторых, параметром должны быть только секунды — у Вас же зачем-то ещё название анимации указано. Потому и не работает.

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

@keyframes animKrysa < 0% < transform: translateX(0) scale(0.4); >25% < transform: translateX(calc(50vw + 50px)) scale(0.1); >50% < transform: translateX(calc(50vw + 50px)) scale(0.05); >100% < transform: translateX(calc(50vw + 80px)) scale(0.001); >> .krysa

Отслеживать
ответ дан 17 дек 2020 в 7:50
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков

humster_spb спасибо за быстрый ответ и указанные ошибки. Но получилось несколько не так как хотелось бы. Появление крысы на экране должно быть через 4 сек., после открытия страницы, только потом начинается ее движение. У Вас же крыса сразу появляется на экране и только потом через 4 сек начинает движение.

animation-delay

Свойство animation-delay устанавливает время ожидания перед воспроизведением анимации. Значение 0s или 0ms, которое установлено по умолчанию, запускает анимацию сразу же, как только она применяется к элементу. Отрицательное значение также включает анимацию без задержек, но приводит к изменению последовательности начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах animation-name .

Синтаксис

Значения

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.animationDelay

Браузеры

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-animation-delay .

Opera до версии 12.10 поддерживает нестандартное свойство -o-animation-delay .

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-animaition-delay .