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