📗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%;
}

Результат будет выглядеть так:

transition0

Открыть пример на CodePen

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;
}

transition1

Открыть пример на CodePen

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)

transition2

Открыть пример на CodePen

Пошаговые функции используются для "прерывистого" изменения элемента. Они разбивают полную продолжительность анимации на равные интервалы и фиксируют промежуточное состояние.

(продолжительность анимации 0.5s)

transition3

Вернемся к пошаговой функции 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)

transition4

Открыть пример на CodePen

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;
}

transition5

(у первого блока 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.