Свойство transition
Сокращенная запись для определения перехода значений свойств, которая включает в себя свойства transition-property, transition-duration, transition-timing-function и transition-delay
transition: opacity 1s linear;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
transition: opacity 0.2s linear 0.4s;
Определение перехода для одного свойства. Порядок параметров: transition-property transition-duration transition-timing-function transition-delay. Параметр transition-timing-function и transition-delay можно не указывать, тогда функция будет использоваться ease и не будет задержки перед началом перехода.
<style>
.example-1 {
width: 100px;
height: 100px;
background: #fd4d66;
transition: opacity 0.2s linear;
}
.example-1:hover {
opacity: 0.5;
}
</style>
<div class="example-1">Наведи на меня</div>Наведи на меня
transition: opacity 0.2s linear, background 0.2s linear;
Определение перехода для для нескольких свойств, перечисляемых через запятую.
<style>
.example-2 {
width: 100px;
height: 100px;
background: #fd4d66;
transition: opacity 0.2s linear, background 0.2s linear;
}
.example-2:hover {
opacity: 0.5;
background: #5f77ec;
}
</style>
<div class="example-2">Наведи на меня</div>Наведи на меня