Web/CSS/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

• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

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

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

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.

See also

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

CSS Animations by Mozilla Contributors is licensed under CC-BY-SA 2.5.