CSS Animations

Experimental

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

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

Reference

CSS Properties

CSS At-rules

Guides

Как определить, поддерживаются ли CSS-анимации
Описаны техники определения того, поддерживает ли браузер CSS-анимации.
Использование CSS-анимаций
Пошаговое руководство по созданию анимаций с помощью CSS. Статья описывает все касающиеся анимации CSS-свойства и @-правила и объясняет, как они взаимодействуют друг с другом.

Specifications

Specification Status Comment
CSS Animations Level 1 Рабочий черновик Initial definition.

Browser compatibility

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)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Да)-webkit (en-US)
43.0
5.0 (5.0)-moz (en-US)
16.0 (16.0)
10 12-o (en-US)
12.10[2]
4.0-webkit (en-US)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 -webkit (en-US) [1]
4.0 -webkit (en-US)
5.0 (5.0)-moz (en-US)
16.0 (16.0)
? ? (Да)-webkit (en-US)

[1] Partial support: animation-fill-mode property is not supported in Android browser below 2.3.

[2] See the release notes to Opera 12.50.

See also

  • Related to CSS Animations, CSS Transitions can trigger animations on user actions.