CSS Animations

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

@keyframes

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

`animation` property

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`animation`	Chrome Full support 43 Full support 43 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Full support 16 Full support 16 Full support 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. Full support 5 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE Full support 10	Opera Full support 30 Full support 30 Full support 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit- No support 12.1 — 15 No support 12 — 15 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari Full support 9 Full support 9 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android Full support 43 Full support 43 Full support 2 Prefixed Notes Prefixed Implemented with the vendor prefix: -webkit- Notes The `animation-fill-mode` property is not supported in Android browsers below 2.3.	Chrome Android Full support 43 Full support 43 Full support 18 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Full support 16 Full support 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. Full support 5 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android Full support 30 Full support 30 Full support 14 Prefixed Prefixed Implemented with the vendor prefix: -webkit- No support 12.1 — 14 No support 12 — 14 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS Full support 9 Full support 9 Full support 3.2 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 4.0 Full support 4.0 Full support 1.0 Prefixed Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support: Full support
See implementation notes.: See implementation notes.
User must explicitly enable this feature.: User must explicitly enable this feature.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.