W3cubDocs

/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

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 compatibilityUpdate compatibility data on GitHub

animation property

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
animation 43
43
3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
12
12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
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.
5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
10 30
30
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.1 — 15
12 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
9
9
4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
animation 43
43
2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
The animation-fill-mode property is not supported in Android browsers below 2.3.
43
43
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
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.
5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
30
30
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.1 — 14
12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
9
9
3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
4.0
4.0
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

See also

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

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations