Свойство animation-delay
Свойство animation-delay задает время задержки анимации (можно указать несколько через запятую).
Допустимые значения
- — точное значение временной задержки перед переходом. Задается в секундах s или в миллисекундах ms
| Значение по умолчанию | 0 |
|---|---|
| Применимо | к блочным и строчным элементам |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
|
Пример
div {
width:100px;
height:50px;
position:absolute;
top:5px;
animation-name:'slide';
animation-duration: 10s;
animation-delay:5s;
}Второй пример: Через 5с после загрузки страницы этот блок поедет слева направо в течение 10с, причем за первые 5с он проедет всего 10% расстояния.
div {
background:#0f0;
color:#f00;
position:absolute;
width:20px;
top:90px;
animation-name:'slide';
animation-duration: 10s;
animation-delay:5s;
}
@keyframes 'slide'{
from{
left:8px;
}
50%{
left:20px;
}
to{
left:200px;
}
}
На момент выхода статьи в прямом виде это свойство не поддерживается ни одним из распространенных браузеро
Заметки
Это свойство относится к модулю CSS Animations Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.
Safari 4.0 и выше Chrome 3.0 и выше поддерживают аналогичное свойство -webkit-animation-delay, а также поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes