Использование CSS переходов

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером. A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).

Замечание: CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.

Какие CSS свойства анимируются?

Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень доступных для анимирования свойств ограничен определённым набором.

Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.

Значение свойства auto является сложным случаем. Спецификация не рекомендует анимировать в значение auto и из значения auto. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с auto следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.

Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью .appendChild() или удаления его display: none; свойства. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить window.setTimeout() c некоторым количеством миллисекунд до изменения CSS свойства, которое вы собираетесь анимировать.

Пример анимирования нескольких свойств

HTML

<body>
    <p>К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтоб увидеть, как они анимируются</p>
    <div class="box"></div>
</body>

CSS

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

CSS свойства, определяющие переходы

CSS переходы контролируются свойством transition. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.

Можно контролировать определённые параметры перехода следующими подсвойствами:

(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS transitions только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство animation.)

transition-property (en-US): Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.
transition-duration: Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.

transition-duration: 0.5s

transition-duration: 1s

transition-duration: 2s

transition-duration: 4s
transition-timing-function (en-US): Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство функций времени может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда Easing Functions Cheat Sheet.

transition-timing-function: ease

transition-timing-function: linear

transition-timing-function: step-end

transition-timing-function: steps(4, end)
transition-delay (en-US): Определяет как много должно пройти времени, перед тем как начнётся переход.

transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s

Короткая запись синтаксиса:

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Определение завершения перехода

Есть событие, срабатывающее, когда переход завершён. Во всех браузерах, совместимых со стандартами, есть событие transitionend, в WebKit есть webkitTransitionEnd. Смотрите таблицу поддержки браузерами для дополнительной информации. У transitionend есть 2 свойства:

propertyName: Строка, показывающая изменение какого свойства завершено.
elapsedTime: Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству transition-delay (en-US).

Как обычно, используйте метод element.addEventListener(), чтобы следить за этим событием:

el.addEventListener("transitionend", updateTransition, true);

Замечание: Событие transitionend не произойдёт, когда переход был прерван до его завершения, например, если установили display: none или значение анимируемого свойства изменилось.

Когда у списков значений свойств разные длины

Если любой список свойств короче, чем другие, его значения повторяются, чтобы сделать его длину как и у других. Например:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

Это рассматривается, как если бы это было:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

Похожим образом, если какой-то список свойств длиннее, чем у transition-property (en-US), он обрезается:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

Будет интерпретировано как:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Простой пример

Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навёл мышь на элемент:

#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

Использование переходов для подсвечивания меню

Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.

Перед тем, как вы посмотрите на код, возможно захотите посмотреть на живое демо (считаем, что ваш браузер поддерживает переходы). Также может посмотреть на CSS, используемый этим примером.

Сначала зададим меню в HTML:

<div class="sidebar">
  <p><a class="menuButton" href="home">Home</a></p>
  <p><a class="menuButton" href="about">About</a></p>
  <p><a class="menuButton" href="contact">Contact Us</a></p>
  <p><a class="menuButton" href="links">Links</a></p>
</div>

Теперь напишем CSS для нашего меню:

.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}

Этот CSS устанавливает внешний вид меню, с фоном и цветом текста, изменяющимися при наведении (:hover).

Вместо описания эффекта можете посмотреть на живой пример, если ваш браузер поддерживает переходы.

Использование переходов, чтобы сделать JavaScript функциональность плавной

Переходы - крутая вещь, чтоб сделать вид вещей плавней, без надобности что-то делать в вашей JS функциональности. Зацените следующий пример:

<p>Кликните куда-нибудь, чтобы подвинуть шар</p>
<div id="foo"></div>

Используя JavaScript, добиваемся эффекта перемещения шара на определённую позицию:

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
},false);

C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое изменение свойств происходит плавно:

p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

Можете поиграть с этим здесь: http://jsfiddle.net/9h261pzo/291/

Спецификации

Спецификация	Статус	Комментарий
CSS Transitions	Рабочий черновик	Изначальное определение

Поддержка браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Настольные
Мобильные

Возможность	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Базовая поддержка	1.0 -webkit (en-US) 26.0	4.0 (2.0) -moz (en-US) 16.0 (16.0)	10	10.5 -o (en-US) 12.10	3.2 -webkit (en-US)
`Событие transitionend`	1.0^[1] 26.0	4.0 (2.0)	10	10.5^[2] 12 12.10	3.2^[1] 6.0

Возможность	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Базовая поддержка	2.1	4.0 (2.0) -moz (en-US) 16.0 (16.0)	10	10 -o (en-US) 12.10	3.2
`Событие transitionend`	2.1^[1]	4.0 (2.0)	10	10^[2] 12 12.10	3.2^[1]

[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестандартное событие webkitTransitionEnd. Chrome 26.0 и WebKit 6.0 придерживаются стандарта transitionend.

[2] Opera 10.5 и Opera Mobile 10 поддерживают oTransitionEnd, версия 12 понимает otransitionend, а версия 12.10 знает стандарт transitionend.

Смотрите также

Нижнее меню с использованием CSS переходов
Интерфейс TransitionEvent (en-US) и событие transitionend (en-US).
Использование CSS анимаций