Свойство animation-delay
Устанавливает задержку старта анимации
animation-delay: 1s;
Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
animation-delay: 1s;
Задержка в указанных единицах. Возможные единицы: s, ms
<style>
.example-1 {
width: 100px;
height: 100px;
background-color: #d62e2e;
animation: 2s moveX forwards;
animation-delay: 1s;
}
@keyframes moveX {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
</style>
<div class="example-1"></div>
animation-delay: -500ms;
Отрицательная задержка. Анимация начинается так, как если бы она уже проигрывалась в течение 500 мс.
<style>
.example-2 {
width: 100px;
height: 100px;
background-color: #d62e2e;
animation: 2s moveX forwards;
animation-delay: -500ms;
}
@keyframes moveX {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
</style>
<div class="example-2"></div>
animation-delay: 1s, 3s;
Задержка старта анимации для разных анимаций элемента, если их указано несколько
<style>
.example-3 {
width: 100px;
height: 100px;
background-color: #d62e2e;
animation: 2s moveX forwards, 1s rotate forwards;
animation-delay: 1s, 3s;
}
@keyframes moveX {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
@keyframes rotate {
from {
transform: translateX(100px) rotate(0);
}
to {
transform: translateX(100px) rotate(90deg);
}
}
</style>
<div class="example-3"></div>