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