BASELINE NowYouCanUse.com
Widely Available Animation
id: animations-css

Animations (CSS)

The animation CSS property animates an element's style over time, using keyframes described in @keyframes rules.
Baseline Status: Achieved Widely Available on Mar 30, 2018 (Cross-browser Newly Available since Sep 30, 2015).
Desktop Browser Engine Support
Google Chrome
43
Supported
Mozilla Firefox
16
Supported
Apple Safari
9
Supported
Microsoft Edge
12
Supported
Mobile Browser Engine Support
Chrome Android
43
Firefox Android
16
Safari iOS
9
Specifications and References
MDN Browser Compat Data Keys:
api.AnimationEvent api.AnimationEvent.AnimationEvent api.AnimationEvent.animationName api.AnimationEvent.elapsedTime api.AnimationEvent.pseudoElement api.CSSAnimation api.CSSAnimation.animationName api.CSSKeyframeRule api.CSSKeyframeRule.keyText api.CSSKeyframeRule.style api.CSSKeyframesRule api.CSSKeyframesRule.appendRule api.CSSKeyframesRule.cssRules api.CSSKeyframesRule.deleteRule api.CSSKeyframesRule.findRule api.CSSKeyframesRule.length api.CSSKeyframesRule.name css.at-rules.keyframes css.at-rules.keyframes.ignore_important_declarations css.at-rules.keyframes.named_range_keyframes css.properties.animation css.properties.animation-delay css.properties.animation-direction css.properties.animation-direction.alternate css.properties.animation-direction.alternate-reverse css.properties.animation-direction.normal css.properties.animation-direction.reverse css.properties.animation-duration css.properties.animation-duration.auto css.properties.animation-fill-mode css.properties.animation-fill-mode.backwards css.properties.animation-fill-mode.both css.properties.animation-fill-mode.forwards css.properties.animation-fill-mode.none css.properties.animation-iteration-count css.properties.animation-iteration-count.infinite css.properties.animation-name css.properties.animation-name.none css.properties.animation-play-state css.properties.animation-play-state.paused css.properties.animation-play-state.running css.properties.animation-timing-function css.properties.animation-timing-function.ease css.properties.animation-timing-function.ease-in css.properties.animation-timing-function.ease-in-out css.properties.animation-timing-function.ease-out css.properties.animation-timing-function.jump css.properties.animation-timing-function.linear css.properties.animation-timing-function.step-end css.properties.animation-timing-function.step-start css.properties.animation.alternate css.properties.animation.alternate-reverse css.properties.animation.auto css.properties.animation.backwards css.properties.animation.both css.properties.animation.ease css.properties.animation.ease-in css.properties.animation.ease-in-out css.properties.animation.ease-out css.properties.animation.forwards css.properties.animation.infinite css.properties.animation.linear css.properties.animation.none css.properties.animation.normal css.properties.animation.reverse css.properties.animation.step-end css.properties.animation.step-start css.types.time