W3cubDocs

/CSS

CSS Animations

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

Reference

CSS Properties

CSS At-rules

@keyframes

Guides

Detecting CSS animation support: Describes a technique for detecting if the browser supports CSS animations.
Using CSS animations: Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.
CSS animations tips: Tips and tricks to help you make the most of CSS animations in your content. Currently offers a technique for re-playing an animation which has already run through to completion, which the API doesn't support inherently.

Specifications

Specification	Status	Comment
CSS Animations	Working Draft	Initial definition.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit 43.0	5.0 (5.0)-moz 16.0 (16.0)	10	12-o 12.10^[2]	4.0-webkit

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1 -webkit [1] 4.0 -webkit	5.0 (5.0)-moz 16.0 (16.0)	?	?	(Yes)-webkit

[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.

CSS Animations

Reference

CSS Properties

CSS At-rules

Guides

Specifications

Browser compatibility

See also