Свойство animation-delay

Устанавливает задержку старта анимации

animation-delay: 1s;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

animation-delay: 1s;

Задержка в указанных единицах. Возможные единицы: sms

<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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии