Transition
Свойство transition используется для управления скоростью изменения CSS свойств. Например, при наведении курсора мыши на кнопку, вы хотите сделать ее темнее. Но чтобы изменение цвета произошло не мгновенно, а плавно, в течение 200 миллисекунд.
По сути, это способ задать замедление при переходе элемента из одного состояния в другое.
Transition включает в себя следующие подсвойства (указываются или в одну строку в данном порядке без запятых, или отдельно, сохраняя порядок значений относительно перечисленных свойств в transition-property):
| Подсвойство | Значение по умолчанию |
|---|---|
| transition-property | all |
| transition-duration | 0s |
| transition-timing-function | ease |
| transition-delay | 0s |
div < transition: margin-left 0.4s ease-in-out 0.2s; > Данный код означает, что для всех элементов div , при изменении свойства margin-left , такое изменение будет происходить постепенно в течение 400 миллисекунд (с задержкой 200 миллисекунд), используя функцию ease-in-out .
Transition может применяться ко всем элементам, а также псевдоэлементам ::before и ::after .
Измененное состояние элемента может быть определено через :hover , :active или дополнительный класс.
Примечание:
Transition поддерживает описание нескольких анимаций, в таком случае они перечисляются через запятую.
(в одну строку записан transition для свойств background-color, transform и border-radius)
.el < width: 100px; height: 100px; margin: 50px; background-color: mediumseagreen; transition: background-color 0.5s ease-in-out 0.3s, transform 1s, border-radius 1s; > .el:hover < transform: rotate(180deg); background-color: lightcoral; border-radius: 50%; > Результат будет выглядеть так:
transition-property
Свойство transition-property указывает одно или несколько имен свойств, для которых применяется замедление перехода из одного состояния в другое.
Не все свойства поддерживают анимацию. Она доступна тем свойствам, которые влияют на визуальное отображение элемента (размеры, цвет, прозрачность, границы, позиционирование и т.д.).
Если необходимо применить анимацию ко всем изменяемым свойствам, используйте значение all
или не указывайте его вообще, так как all является значением по умолчанию:
Важно!
Избегайте применения transition к свойствам с значением auto. Это может привести к непредсказуемым последствиям из-за разной поддержки данного значения браузерами.
transition-duration
Данное свойство указывает продолжительность перехода (в секундах).
div class="el el-1">0.2s div> div class="el el-2">0.5s div> div class="el el-3">1.2s div> .el < width: 100px; height: 100px; margin-top: 50px; > .el:hover < margin-left: 50px; > .el-1 < background-color: green; transition: margin-left 0.2s; > .el-2 < background-color: red; transition: margin-left 0.5s; > .el-3 < background-color: blue; transition: margin-left 1.2s; > transition-timing-function
Данное свойство описывает функцию, по которой вычисляются промежуточные значения свойств.
Значения transition-timing-function:
| linear | анимация проходит линейно, без ускорений и замедлений |
| Функции Безье | |
|---|---|
| ease | значение по умолчанию, анимация проходит плавно с небольшим замедлением в начале и к завершению |
| ease-in | анимация замедлена в начале и ускоряется к завершению |
| ease-out | анимация ускорена в начале и замедляется к завершению |
| ease-in-out | анимация ускоряется к середине и замедлена в начале и к завершению |
| Пошаговые функции | |
|---|---|
| step-start | делит анимацию на 1 интервал (шаг) и запускает её в начале временного отрезка, аналогично steps(1, start) |
| step-end | делит анимацию на 1 интервал и запускает её в конце временного отрезка, аналогично steps(1, end) |
| steps( integer, step-position) | ступенчатая функция, принимает два параметра: количество шагов и положение шага |
Рассмотрим эти свойства на практике.
Функции Безье используются для плавной анимации. Они позволяют задавать неравномерную скорость изменения элемента, например, ускорение и замедление.
Ниже приведены наглядные примеры передвижения блоков с одинаковой продолжительностью анимации и разными значениями timing-function.
(продолжительность анимации у всех блоков 2 секунды — 2s )
Пошаговые функции используются для «прерывистого» изменения элемента. Они разбивают полную продолжительность анимации на равные интервалы и фиксируют промежуточное состояние.
(продолжительность анимации 0.5s )
Вернемся к пошаговой функции steps( integer, step-position). Integer — целое число больше 0, указывающее количество шагов (однако, если вторым параметром является jump-none , то integer должен быть больше 1). Положение шага (step-position) — необязательный параметр, указывает момент, в который начинается анимация, имеет следующие значения:
| step-position | |
|---|---|
| jump-start | анимация начинается с нулевого отрезка времени |
| start | аналогично jump-start |
| jump-end | анимация начинается с первого отрезка времени |
| end | аналогично jump-end |
| jump-none | продолжительность функции делится на (iteration + 1), анимация начинается и заканчивается паузой длинной в один отрезок |
| jump-both | продолжительность функции делится на (iteration + 1), анимация начинается и заканчивается шагом |
Сравните поведение блоков с одинаковой продолжительностью анимации и тем, во время какого интервала начинается и заканчивается их движение.
(продолжительность анимации — 2 секунды 2s , количество шагов — 4 )
transition-delay
Данное свойство определяет задержку старта анимации.
div class="el el-1">0s div> div class="el el-2">0.6s div> .el < transition-duration: 0.5s; > .el-2 < transition-delay: 0.6s; > (у первого блока transition-delay не указан, у второго — 0.6s , анимация начинается через 0.6 секунд)
Порядок значений
Если подсвойства transition указывать раздельно, их значения будут соответствовать порядку transition-property .
div < width: 100px; height: 50px; transition-property: width, height; transition-duration: 0.5s, 0.3s; > Для width transition-duration будет равен 0.5s, для height — 0.3s.
Если какой-то из списков свойств длиннее, чем transition-property, то он обрезается:
div < width: 100px; height: 50px; transition-property: width, height; transition-duration: 0.5s, 0.3s, 0.1s; > /* width 0.5s, height 0.3s */ Если же он короче, то недостающие значения дублируются из начала списка:
div < transition-property: width, height, margin-left; transition-duration: 1s, 0.2s; > /* width 1s, height 0.2s, margin-left 1s */ div < transition-property: width, height, margin-left, opacity, color; transition-duration: 1s, 0.2s, 0.5s; > /* width 1s, height 0.2s, margin-left 0.5s, opacity 1s, color 0.2s */ Поддержка браузерами
Transition поддерживается всеми современными браузерами.
Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition .
Opera до версии 12.10 поддерживает свойство -o-transition .
Firefox до версии 16.0 поддерживает свойство -moz-transition .