CSS-свойство transition

CSS-свойство transition позволяет установить переход между двумя состояниями элемента. Это короткое свойство для указания transition-property, transition-duration, transition-timing-function и transition-delay.

Значение по умолчанию:	`all 0 ease 0`
Применяется к:	Все элементы, `::before` и `::after` псевдо-элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

transition: [ transition-property | transition-duration | transition-timing-function | transition-delay ] | initial | inherit

Примеры написания кода свойства transition:

button {
    background: #fd7c2a;
    -webkit-transition-property: background 2s; /* For Safari 3.0+ */
    transition: background 2s; /* Standard syntax */
}
button:hover {
    background: #3cc16e;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`transition-property`	Указывает имена CSS-свойств, к которым должен применяться эффект перехода.
`transition-duration`	Определяет количество секунд или миллисекунд, которое анимация перехода должна занять для завершения.
`transition-timing-function`	Определяет функцию по которой будет рассчитываться промежуточные значения CSS-свойств, на которые влияет переход.
`transition-delay`	Указывает задержку перед эффектом перехода.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `transition`.