Web animations
Widely available since 2022-09-24 (baseline high)
The web animations API allows you to animate and synchronize the animations of DOM elements.
Compatibility (view on caniuse.com)
- Chrome 36 Released on 2014-07-16
- Chrome Android 36 Released on 2014-07-16
- Edge 79 Released on 2020-01-15
- Firefox 48 Released on 2016-08-02
- Firefox for Android 48 Released on 2016-08-02
- Safari 13.1 Released on 2020-03-24
- Safari on iOS 13.4 Released on 2020-03-24
MDN docs
- Element.animate
- Animation
- Animation.Animation
- Animation.cancel
- Animation.cancel_event
- Animation.currentTime
- Animation.finish
- Animation.finish_event
- Animation.id
- Animation.pause
- Animation.play
- Animation.playState
- Animation.playbackRate
- Animation.reverse
- Animation.startTime
- Animation.effect
- AnimationEffect
- AnimationEffect.getComputedTiming
- AnimationEffect.getTiming
- AnimationEffect.updateTiming
- KeyframeEffect
- KeyframeEffect.KeyframeEffect
- KeyframeEffect.target
- Animation.pending
- Animation.updatePlaybackRate
- Animation.finished
- Animation.ready
- AnimationPlaybackEvent
- AnimationPlaybackEvent.AnimationPlaybackEvent
- AnimationPlaybackEvent.currentTime
- AnimationPlaybackEvent.timelineTime
- KeyframeEffect.getKeyframes
- KeyframeEffect.setKeyframes
- Animation.commitStyles
- Animation.persist
- Animation.remove_event
- Animation.replaceState
- Animation.timeline
- AnimationTimeline
- AnimationTimeline.currentTime
- Document.timeline
- DocumentTimeline
- DocumentTimeline.DocumentTimeline
- Document.getAnimations
- KeyframeEffect.pseudoElement
- KeyframeEffect.composite
- KeyframeEffect.iterationComposite
Specifications
BCD data
- api.Element.animate
- api.Animation
- api.Animation.Animation
- api.Animation.cancel
- api.Animation.cancel_event
- api.Animation.currentTime
- api.Animation.finish
- api.Animation.finish_event
- api.Animation.id
- api.Animation.pause
- api.Animation.play
- api.Animation.playState
- api.Animation.playbackRate
- api.Animation.reverse
- api.Animation.startTime
- api.Animation.effect
- api.AnimationEffect
- api.AnimationEffect.getComputedTiming
- api.AnimationEffect.getTiming
- api.AnimationEffect.updateTiming
- api.KeyframeEffect
- api.KeyframeEffect.KeyframeEffect
- api.KeyframeEffect.target
- api.Animation.pending
- api.Animation.updatePlaybackRate
- api.Animation.finished
- api.Animation.ready
- api.AnimationPlaybackEvent
- api.AnimationPlaybackEvent.AnimationPlaybackEvent
- api.AnimationPlaybackEvent.currentTime
- api.AnimationPlaybackEvent.timelineTime
- api.KeyframeEffect.getKeyframes
- api.KeyframeEffect.setKeyframes
- api.Animation.commitStyles
- api.Animation.persist
- api.Animation.remove_event
- api.Animation.replaceState
- api.Animation.timeline
- api.AnimationTimeline
- api.AnimationTimeline.currentTime
- api.Document.timeline
- api.DocumentTimeline
- api.DocumentTimeline.DocumentTimeline
- api.Document.getAnimations
- api.KeyframeEffect.pseudoElement
- api.KeyframeEffect.composite
- api.KeyframeEffect.iterationComposite