35. Переходы.

По умолчанию при использовании псевдокласса :hover изменение свойств происходит мгновенно.

Переходом называется плавная смена свойств элемента.

СSS-свойства вида transition-* позволяют настроить продолжительность и метод перехода.

Продолжительность перехода задаётся при помощи свойства transition-duration (временные единицы).

Можно указать время ожидания перед запуском перехода при помощи свойства transition-delay.

Переход обычно настраивают в селекторе без псевдокласса. В этом случае переход работает и при наведении, и при смещении курсора!

#banana {
font-size: large;
border: medium solid black;
transition-duration: 4s;
transition-delay: 1s;
}

#banana:hover {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}

Закон, по которому происходит изменение значений при переходе, определяется некой функцией. Вид этой функции можно настроить при помощи transition-timing-function. Для transition-timing-function существуют преопределённые значения (ease – по умолчанию):

А ещё функцию можно определить через кривую Безье:

transition-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0)

При описании перехода можно конкретизировать свойства, которые будут анимироваться, указав их имена через запятую в CSS-свойстве transition-property (ж-но в селекторе без псевдокласса).

При таком подходе возможно указание нескольких значений для длительности и задержки (персонально для описанных анимированных свойств).

Универсальное свойство transition позволяет одновременно задать transition-property, transition-duration, transition-timing-function и transition-delay.

transition: переход [,переход]*
переход = [ none | transition-property] ||
transition-duration ||
transition-timing-function ||
transition-delay