Свойство transition-property

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

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

Значения

transition-property: none;

Не использовать плавный переход для свойств

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

<div class="example-1">Наведи на меня</div>
Наведи на меня
transition-property: opacity;

Плавный переход значений для одного свойства

<style>
.example-2 {
    width: 100px;
    height: 100px;
    background: #fd4d66;
    
    transition: 0.2s linear;
    transition-property: opacity;
}

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

<div class="example-2">Наведи на меня</div>
Наведи на меня
transition-property: opacity, background;

Переход для нескольких свойств, перечисляются через запятую.

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

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

<div class="example-3">Наведи на меня</div>
Наведи на меня
transition-property: all;

Задает плавный переход для всех свойств, значения которых изменяются

<style>
.example-4 {
    width: 100px;
    height: 100px;
    background: #fd4d66;
    
    transition: 0.2s linear, 0.4s linear;
    transition-property: all;
}
.example-4:hover {
    opacity: 0.5;
    background: #5f77ec;
}
</style>

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

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

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

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