Свойство transition-duration

Задает длительность перехода свойств из одного значения в другое

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

Значения

transition-duration: 1s;

Длительность перехода в указанных единицах. Возможные единицы: s, ms

<style>
.example-1 {
    width: 100px;
    height: 100px;
    background: #fd4d66;
    
    transition: opacity linear;
    transition-duration: 1s;
}
.example-1:hover {
    opacity: 0.5;   
}
</style>

<div class="example-1">Наведи на меня</div>
Наведи на меня
transition-duration: 1s, 3s;

Длительность перехода для разных свойств, если их указано несколько в transition-property

<style>
.example-2 {
    width: 100px;
    height: 100px;
    background: #fd4d66;
    
    transition: opacity linear, background linear;
    transition-duration: 1s, 3s;
}
.example-2:hover {
    opacity: 0.5;
    background: #5f77ec;
}
</style>

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

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

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

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