Свойство 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>Наведи на меня