Animations (CSS)Baseline · Widely available

The animation CSS property animates an element's style over time, using keyframes described in @keyframes rules.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 30, 2015. Widely available since Mar 30, 2018.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–42Not supported

43+Supportedsince May 19, 2015

Current: 155

Edge

12+Supportedsince Jul 29, 2015

Current: 154

Firefox

1–15Not supported

16+Supportedsince Oct 9, 2012

Current: 157

Safari

1–8Not supported

9+Supportedsince Sep 30, 2015

Current: 27

MobileChrome Android

18–42Not supported

43+Supportedsince May 27, 2015

Current: 155

Firefox Android

4–15Not supported

16+Supportedsince Oct 9, 2012

Current: 157

Safari iOS

1–8Not supported

9+Supportedsince Sep 16, 2015

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: AnimationEvent.

Feature detection

CSS · check before using

@supports (animation: initial) {
  /* styles that rely on animation */
}

/* or in JavaScript */
if (CSS.supports("animation", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org/css-animations-2 ↗

Usage share

caniuse.com/css-animation ↗

Sub-features

Support for each part of the feature (68). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
AnimationEvent	43	12	5	9	43	5	9
AnimationEvent.AnimationEvent	43	14	23	9	43	23	9
AnimationEvent.animationName	43	12	5	9	43	5	9
AnimationEvent.elapsedTime	43	12	5	9	43	5	9
AnimationEvent.pseudoElement	68	79	23	13.1	68	23	13.4
CSSAnimation	84	84	75	13.1	84	79	13.4
CSSAnimation.animationName	84	84	75	13.1	84	79	13.4
CSSKeyframeRule	31	12	48	9	31	48	9
CSSKeyframeRule.keyText	31	12	48	9	31	48	9
CSSKeyframeRule.style	31	12	48	9	31	48	9
CSSKeyframesRule	31	12	48	9.1	31	48	9.3
CSSKeyframesRule.appendRule	41	12	48	9.1	41	48	9.3
CSSKeyframesRule.cssRules	31	12	48	9.1	31	48	9.3
CSSKeyframesRule.deleteRule	31	12	48	9.1	31	48	9.3
CSSKeyframesRule.findRule	31	12	48	9.1	31	48	9.3
CSSKeyframesRule.length	123	123	109	17	123	109	17
CSSKeyframesRule.name	31	12	48	9.1	31	48	9.3
@keyframes	43	12	16	9	43	16	9
@keyframes.ignore_important_declarations	45	79	19	10.1	45	19	10.3
@keyframes.named_range_keyframes	115	115	✕	26	115	✕	26

Show 48 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
animation	43	12	16	9	43	16	9
animation-delay	43	12	16	9	43	16	9
animation-direction	43	12	16	9	43	16	9
animation-direction.alternate	43	12	16	9	43	16	9
animation-direction.alternate-reverse	43	12	16	9	43	16	9
animation-direction.normal	43	12	16	9	43	16	9
animation-direction.reverse	43	12	16	9	43	16	9
animation-duration	43	12	16	9	43	16	9
animation-duration.auto	115	115	✕	18.4	115	✕	18.4
animation-fill-mode	43	12	16	9	43	16	9
animation-fill-mode.backwards	43	12	16	9	43	16	9
animation-fill-mode.both	43	12	16	9	43	16	9
animation-fill-mode.forwards	43	12	16	9	43	16	9
animation-fill-mode.none	43	12	16	9	43	16	9
animation-iteration-count	43	12	16	9	43	16	9
animation-iteration-count.infinite	43	12	16	9	43	16	9
animation-name	43	12	16	9	43	16	9
animation-name.none	43	12	16	9	43	16	9
animation-play-state	43	12	16	9	43	16	9
animation-play-state.paused	43	12	16	9	43	16	9
animation-play-state.running	43	12	16	9	43	16	9
animation-timing-function	43	12	16	9	43	16	9
animation-timing-function.ease	43	12	16	9	43	16	9
animation-timing-function.ease-in	43	12	16	9	43	16	9
animation-timing-function.ease-in-out	43	12	16	9	43	16	9
animation-timing-function.ease-out	43	12	16	9	43	16	9
animation-timing-function.jump	77	79	65	14	77	65	14
animation-timing-function.linear	43	12	16	9	43	16	9
animation-timing-function.step-end	43	12	16	9	43	16	9
animation-timing-function.step-start	43	12	16	9	43	16	9
animation.alternate	43	12	16	9	43	16	9
animation.alternate-reverse	43	12	16	9	43	16	9
animation.auto	43	12	16	9	43	16	9
animation.backwards	43	12	16	9	43	16	9
animation.both	43	12	16	9	43	16	9
animation.ease	43	12	16	9	43	16	9
animation.ease-in	43	12	16	9	43	16	9
animation.ease-in-out	43	12	16	9	43	16	9
animation.ease-out	43	12	16	9	43	16	9
animation.forwards	43	12	16	9	43	16	9
animation.infinite	43	12	16	9	43	16	9
animation.linear	43	12	16	9	43	16	9
animation.none	43	12	16	9	43	16	9
animation.normal	43	12	16	9	43	16	9
animation.reverse	43	12	16	9	43	16	9
animation.step-end	43	12	16	9	43	16	9
animation.step-start	43	12	16	9	43	16	9
<time>	1	12	4	3.1	18	4	2