HTTP/2 302
cache-control: no-store
location: /en-US/docs/Web/API/Web_Animations_API
vary: Accept
content-type: text/plain; charset=utf-8
x-cloud-trace-context: cf0b978d355341b996ae3a0d44b4e33f
date: Sun, 24 Aug 2025 04:21:06 GMT
server: Google Frontend
content-length: 60
via: 1.1 google
x-cache: miss
alt-svc: clear
HTTP/2 200
x-guploader-uploadid: ABgVH89RGCLyk9EA22K0LzGWluXYgMZqokTdpcSgEcOlxQk7Xdyeg5csnqXNoN6Tcae5DwcBJDw7yNo
x-goog-generation: 1755996433014233
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 178781
x-goog-meta-goog-reserved-file-mtime: 1755994661
x-goog-hash: crc32c=Okltug==, md5=r9kjkp1z9jW1u4OA56311g==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Sun, 24 Aug 2025 05:21:06 GMT
cache-control: public, max-age=3600
last-modified: Sun, 24 Aug 2025 00:47:13 GMT
etag: W/"afd923929d73f635b5bb8380e7adf5d6"
content-type: text/html
age: 0
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 3faa24c88885304796ae3a0d44b4e8e8
date: Sun, 24 Aug 2025 04:21:06 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
Web Animations API
The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read Using the Web Animations API .
Animation
Provides playback controls and a timeline for an animation node or source. Can take an object created with the KeyframeEffect()
KeyframeEffect
Describes sets of animatable properties and values, called keyframes and their timing options. These can then be played using the Animation()
AnimationTimeline
Represents the timeline of animation. This interface exists to define timeline features (inherited by DocumentTimeline
AnimationEvent
Part of the CSS Animations module, capturing the animation name and elapsed time.
DocumentTimeline
Represents animation timelines, including the default document timeline (accessed using the Document.timeline
The Web Animations API adds features to documentelement
document.timeline
The DocumentTimeline object representing the default document timeline.
document.getAnimations()
Returns an Array of Animationdocument.
Element.animate()
A shortcut method for creating and playing an animation on an element. It returns the created Animation
Element.getAnimations()
Returns an Array of Animation
