BASELINE NowYouCanUse.com
Widely Available Animation

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.paused ↗ css.properties.animation.reverse ↗ css.properties.animation.running ↗ css.properties.animation.step-end ↗ css.properties.animation.step-start ↗ css.types.time ↗
id: animations-css