CSS Animations

Jump to:
  1. Reference
  2. Guides
  3. Specifications
  4. Browser compatibility
  5. See also

CSS Animations is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.

Reference

CSS Properties

CSS At-rules

Guides

Detecting CSS animation support
Describes a technique for detecting if a 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 with each other.
CSS animations tips and tricks
Tips and tricks to help you get the most out of CSS animations. Currently offers a technique for replaying 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

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!

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

See also

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

 

Document Tags and Contributors

Tags: 
 Contributors to this page: mfluehr, wbamberg, erikadoyle, ownsourcing, Sheppy, MexieAndCo, teoli, fscholz
 Last updated by: mfluehr,