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 ↗