📗CSS 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)
HTML
<div class="el"></div>CSS
.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
div {
transition: all 0.4s;
}или не указывайте его вообще, так как all является значением по умолчанию:
div {
transition: 0.4s;
}Важно!
Избегайте применения transition к свойствам с значением auto. Это может привести к непредсказуемым последствиям из-за разной поддержки данного значения браузерами.
transition-duration
Данное свойство указывает продолжительность перехода (в секундах).
Пример:
HTML
<div class="el el-1">0.2s</div>
<div class="el el-2">0.5s</div>
<div class="el el-3">1.2s</div>CSS
.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.
Last updated