CSS свойство transition

Универсальное свойство, которое позволяет одновременно задать значения

• transition-property,
• transition-duration,
• transition-timing-function,
• transition-delay.

Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.

Значение по умолчанию

all 0s ease 0s

Синтаксис

transition: <переход> [, <переход> ]*

Здесь:

<переход> = [ none | <transition-property> ] || <transition-duration> ||   <transition-timing-function> || <transition-delay> 

Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

Синтаксис

transition-property: none | all | <свойство> [,<свойство>]*

Значения

• none - Никакое свойство не задано.
• all - Все свойства будут отслеживаться.
• <свойство> - Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

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

Синтаксис

transition-duration: <время> [,<время>]*

Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону.

Синтаксис

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps | cubic-bezier

Значения

• ease - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
• ease-in - Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
• ease-out - Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
• ease-in-out - Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
• linear - Одинаковая скорость от начала и до конца.
• step-start - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
• step-end - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
• steps - Ступенчатая функция, имеющая заданное число шагов.

transition-timing-function: steps(<число>, start | end)

Здесь:

<число> — целое число больше нуля
start — задаёт полунепрерывную снизу функцию
end — задаёт полунепрерывную сверху функцию
cubic-bezier - Задаёт функцию движения в виде кривой Безье.

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода.
Значение 0s запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

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

Синтаксис

transition-delay: <время> [,<время>]*