Свойство transition-delay

Задает задержку перед запуском эффекта перехода свойства при изменении его значения

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

Значения

transition-delay: 1s;

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

<style>
.example-1 {
    width: 150px;
    height: 100px;
    padding: 5px;
    background: #fd4d66;
    
    transition: opacity 0.2s linear;
    transition-delay: 1s;
}

.example-1:hover {
    opacity: 0.5;   
}
</style>

<div class="example-1">Наведи на меня и подожди 1 сек.</div>
Наведи на меня и подожди 1 сек.
transition-delay: -500ms;

Отрицательная задержка. Переход начнется так, как если бы он уже проигрывался в течение 500 мс.

<style>
.example-2 {
    width: 100px;
    height: 100px;
    background: #fd4d66;
    
    transition: transform 2s linear;
    transition-delay: -500ms;
}

.example-2:hover {
    transform: rotate(90deg);
}
</style>

<div class="example-2"></div>
transition-delay: 1s, 0.5s;

Задержка перехода для разных свойств, если их указано несколько

<style>
.example-3 {
    width: 100px;
    height: 100px;
    background: #fd4d66;
    
    transition: opacity 0.2s linear, background 0.2s linear;
    transition-delay: 1s, 0.5s;
}

.example-3:hover {
    opacity: 0.5;
    background: #5f77ec;
}
</style>

<div class="example-3">Наведи на меня</div>
Наведи на меня

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

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

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