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. |
Поддержка браузеров
Свойство transition поддерживается во всех основных браузерах.