Web animationsBaseline · Widely available
The web animation API programmatically creates, inspects, and controls element animations, to change and synchronize appearance over time.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 16, 2020. Widely available since Mar 16, 2023.
Browser support
DesktopChrome
1–83Not supported
84+Supportedsince Jul 27, 2020
Current: 155Edge
12–83Not supported
84+Supportedsince Jul 16, 2020
Current: 154Firefox
1–74Not supported
75+Supportedsince Apr 7, 2020
Current: 157Safari
1–13.1Not supported
14+Supportedsince Sep 16, 2020
Current: 27MobileChrome Android
18–83Not supported
84+Supportedsince Jul 27, 2020
Current: 155Firefox Android
4–68Not supported
79+Supportedsince Jul 28, 2020
Current: 157Safari iOS
1–13.4Not supported
14+Supportedsince Sep 16, 2020
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: Animation.
Feature detection
JS · check before using
if ("Animation" in globalThis) {
// Animation is available
} else {
// load a polyfill or use a fallback
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (61). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| Animation | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.Animation | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.cancel | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.cancel_event | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.commitStyles | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| Animation.currentTime | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.effect | 75 | 79 | 63 | 13.1 | 75 | 63 | 13.4 |
| Animation.finish | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.finish_event | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.finished | 84 | 84 | 63 | 13.1 | 84 | 63 | 13.4 |
| Animation.id | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.pause | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.pending | 76 | 79 | 59 | 13.1 | 76 | 59 | 13.4 |
| Animation.persist | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| Animation.play | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.playState | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.playbackRate | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.ready | 84 | 84 | 63 | 13.1 | 84 | 63 | 13.4 |
| Animation.remove_event | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| Animation.remove_filling_animation | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
Show 41 more
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| Animation.replaceState | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| Animation.reverse | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.startTime | 75 | 79 | 48 | 13.1 | 75 | 48 | 13.4 |
| Animation.timeline | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| Animation.updatePlaybackRate | 76 | 79 | 60 | 13.1 | 76 | 60 | 13.4 |
| AnimationEffect | 75 | 79 | 63 | 13.1 | 75 | 63 | 13.4 |
| AnimationEffect.getComputedTiming | 75 | 79 | 63 | 13.1 | 75 | 63 | 13.4 |
| AnimationEffect.getTiming | 75 | 79 | 63 | 13.1 | 75 | 63 | 13.4 |
| AnimationEffect.updateTiming | 75 | 79 | 63 | 13.1 | 75 | 63 | 13.4 |
| AnimationPlaybackEvent | 84 | 84 | 63 | 13.1 | 84 | 63 | 13.4 |
| AnimationPlaybackEvent.AnimationPlaybackEvent | 84 | 84 | 63 | 13.1 | 84 | 63 | 13.4 |
| AnimationPlaybackEvent.currentTime | 84 | 84 | 63 | 13.1 | 84 | 63 | 13.4 |
| AnimationPlaybackEvent.timelineTime | 84 | 84 | 63 | 13.1 | 84 | 63 | 13.4 |
| AnimationTimeline | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| AnimationTimeline.currentTime | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| AnimationTimeline.duration | 115 | 115 | ✕ | 26 | 115 | ✕ | 26 |
| Document.getAnimations | 84 | 84 | 75 | 14 | 84 | 79 | 14 |
| Document.timeline | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| DocumentTimeline | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| DocumentTimeline.DocumentTimeline | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| Element.animate | 36 | 79 | 48 | 13.1 | 36 | 48 | 13.4 |
| Element.animate.implicit_tofrom | 84 | 84 | 75 | ✕ | 84 | 79 | ✕ |
| Element.animate.options_composite_parameter | 84 | 84 | 80 | 16 | 84 | 80 | 16 |
| Element.animate.options_id_parameter | 50 | 79 | 48 | 13.1 | 50 | 48 | 13.4 |
| Element.animate.options_pseudoElement_parameter | 84 | 84 | 75 | 14 | 84 | 79 | 14 |
| Element.animate.options_rangeEnd_parameter | 115 | 115 | ✕ | 26 | 115 | ✕ | 26 |
| Element.animate.options_rangeStart_parameter | 115 | 115 | ✕ | 26 | 115 | ✕ | 26 |
| Element.animate.options_timeline_parameter | 85 | 85 | ✕ | 16 | 85 | ✕ | 16 |
| Element.animationcancel_event | ✕ | ✕ | 54 | 13.1 | ✕ | 54 | 13.4 |
| Element.animationend_event | 79 | 18 | 51 | 9 | 79 | 51 | 9 |
| Element.animationiteration_event | 79 | 18 | 51 | 9 | 79 | 51 | 9 |
| Element.animationstart_event | 79 | 18 | 51 | 9 | 79 | 51 | 9 |
| Element.getAnimations | 84 | 84 | 75 | 13.1 | 84 | 79 | 13.4 |
| KeyframeEffect | 75 | 79 | 63 | 13.1 | 75 | 63 | 13.4 |
| KeyframeEffect.KeyframeEffect | 75 | 79 | 63 | 13.1 | 75 | 63 | 13.4 |
| KeyframeEffect.composite | 84 | 84 | 80 | 16 | 84 | 80 | 16 |
| KeyframeEffect.getKeyframes | 84 | 84 | 63 | 13.1 | 84 | 63 | 13.4 |
| KeyframeEffect.pseudoElement | 84 | 84 | 75 | 14 | 84 | 79 | 14 |
| KeyframeEffect.setKeyframes | 84 | 84 | 63 | 13.1 | 84 | 63 | 13.4 |
| KeyframeEffect.target | 75 | 79 | 63 | 13.1 | 75 | 63 | 13.4 |
| ShadowRoot.getAnimations | 84 | 84 | 75 | 14 | 84 | 79 | 14 |