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

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

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

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