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. |
animation property
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
43
- 43
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
12
- 12
- 12
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
16
- 16
- 49
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
- 44
Prefixed Disabled
- Prefixed Requires 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 Requires the vendor prefix: -moz-
|
10 |
30
- 30
- 15
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
- 12.1 — 15
- 12 — 15
Prefixed
- Prefixed Requires the vendor prefix: -o-
|
Yes
- Yes
- 4
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support |
Yes
- Yes
- 2
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
- The
animation-fill-mode property is not supported in Android browsers below 2.3.
|
43
- 43
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
Yes
- Yes
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
16
- 16
- 49
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
- 44
Prefixed Disabled
- Prefixed Requires 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 Requires the vendor prefix: -moz-
|
30
- 30
- 15
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
- 12.1 — 14
- 12 — 14
Prefixed
- Prefixed Requires the vendor prefix: -o-
|
Yes
- Yes
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
4.0
- 4.0
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
See also
- Related to CSS Animations, CSS Transitions can trigger animations based on user actions.