CSS-анимация

Все современные браузеры, кроме IE<10 поддерживают CSS transitions, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Большинство примеров из этой статьи не будут работать в IE<10.

Анимация свойства

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

Например, CSS, представленный ниже, 2 секунды анимирует свойство background-color.

.animated {
  transition-property: background-color;
  transition-duration: 2s;
}

У свойства "transition" есть и короткая запись:

.animated {
  transition: background-color 2s;
}

Так как стандарт CSS Transitions находится в стадии разработки, то transition нужно снабжать браузерными префиксами.

Пример

Этот пример работает во всех современных браузерах, не работает в IE<10.

<style>
.animated {
  -webkit-transition: background-color 2s;
  -ms-transition: background-color 2s;
  -o-transition: background-color 2s;
  -moz-transition: background-color 2s;
  transition: background-color 2s; /* без префикса - на будущее */

  border: 1px solid black;
}
</style>
<div class="animated" onclick="this.style.backgroundColor='red'">
  <span style="font-size:150%">Кликни меня</span>
</div>

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

Полный синтаксис CSS

Свойства для CSS-анимаций:

transition-property

Список свойств, которые будут анимироваться. Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

transition-duration

Продолжительность анимации. Если указано одно значение — оно применится ко всем свойствам, можно указать несколько значений для разных transition-property.

transition-timing-function

Кривая Безье по 4-м точкам, используемая в качестве временной функциии.

transition-delay

Указывает задержку от изменения свойства до начала CSS-анимации.

Свойство transition может содержать их все, в порядке: property duration timing-function delay, ....

Пример

Анимируем одновременно цвет и размер шрифта:

<style>
.growing {
  -webkit-transition: font-size 3s, color 2s;
  -ms-transition: font-size 3s, color 2s;
  -o-transition: font-size 3s, color 2s;
  -moz-transition: font-size 3s, color 2s;
  transition: font-size 3s, color 2s; 
}
</style>
<button class="growing" onclick="this.style.fontSize='36px';this.style.color='red'">Кликни меня</button>

Кликни меня

Временная функция

В качестве временной функции можно выбрать любую кривую Безье с начальной точкой (0,0) и конечной (1,1).

Две остальные точки можно задавать как cubic-bezier(x2, y2, x3, y3), значения x2,x3 — в пределах 0..1 , y2,y3 — любые.

Например, кривая Безье cubic-bezier(0.0,0.5,0.5,1.0) описывает торможение.

Кликните на поезд:

<style>
.train {
  position: relative;
  left: 0;
  -moz-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
  -webkit-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
  -ms-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
  -o-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
  transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
}
</style>
<img class="train" width="177" height="160" src="/files/tutorial/browser/animation/train.gif" onclick="this.style.left='450px'">

График кривой из примера:

Существуют и несколько стандартных кривых: linear, ease, ease-in, ease-out и ease-in-out.

Значение linear — это прямая, равномерное изменение. Оно используется по умолчанию.

Остальные кривые являются короткой записью следующих cubic-bezier:

ease	ease-in	ease-out	ease-in-out
(0.25, 0.1, 0.25, 1.0)	(0.42, 0, 1.0, 1.0)	(0, 0, 0.58, 1.0)	(0.42, 0, 0.58, 1.0)

Наиболее близкий стандартный вариант для примера с поездом — ease-out:

.train {
  -moz-transition: left 5s ease-out;
  ...
}

CSS-преобразования

Браузеры, которые поддерживают CSS-анимацию, поддерживают и CSS-преобразования.

С их помощью можно сделать много красивых эффектов. Например, вращение:

document.body.style.MozTransition = "all 5s";
document.body.style.MozTransform = "rotate(360deg)";
document.body.style.WebkitTransition = "all 5s"; 
document.body.style.WebkitTransform = "rotate(360deg)";
document.body.style.OTransition = "all 5s";
document.body.style.OTransform = "rotate(360deg)";
document.body.style.MsTransition = "all 5s";
document.body.style.MsTransform = "rotate(360deg)";

document.body.style.Transition = "all 5s";
document.body.style.Transform = "rotate(360deg)";

Самое замечательное — все эти эффекты используют графический ускоритель и почти не нагружают процессор.

Все браузеры, кроме IE<10 поддерживают это, ну а в IE может быть что-то через JavaScript или вообще без анимации.

Событие transitionend

На конец CSS-анимации можно повесить обработчик. Его стандартное имя: transitionend, но браузерные префиксы требуются и тут.

Кликните на лодочку:

Открыть в новом окне Открыть в песочнице

Её анимация осуществляется функцией go, которая перезапускается по окончании (с переворотом через CSS).

...
  go();

  elem.addEventListener('transitionend', go, false); /* на будущее */
  elem.addEventListener('webkitTransitionEnd', go, false);
  elem.addEventListener('mozTransitionEnd', go, false);
  elem.addEventListener('oTransitionEnd', go, false);
  elem.addEventListener('msTransitionEnd', go, false);
...

propertyName

Свойство, анимация которого завершилась.

elapsedTime

Время (в секундах), которое заняла анимация, без учета transition-delay.

Свойство propertyName может быть полезно при одновременной анимации нескольких свойств. Каждое свойство даст своё событие, и можно решить, что с ним делать дальше.

Ограничения и достоинства CSS-анимаций

Ограничения:

• Основное ограничение — это то, что временная функция может быть задана только кривой Безье. Более сложные анимации, состоящие из нескольких кривых, реализуются при помощи CSS animations (стандарт пока не готов).
• CSS-анимации касаются только свойств, а в JavaScript можно делать всё, что угодно.
• Отсутствует поддержка в IE<10.

Достоинства:

• Простые вещи делаются просто. Особенно удобно, если от отсутствия эффекта в IE проблем не возникнет.
• Гораздо «легче» для процессора, чем анимации JavaScript. Лучше используется графический ускоритель. Это очень важно для мобильных устройств.

.growing {
  /* все свойства анимируются 3 секунды */
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -o-transition: all 3s;
  -ms-transition: all 3s;
}