JavaScript Element animate() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word ANIMATE

Definition

The Element.animate() method is a Web Animations API shortcut: it creates a new Animation, applies it to the element, plays it, and returns the Animation instance (MDN).

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.animate. Start with this line.

JavaScript
el.animate(keyframes, options)
CallWhat it does
el.animate(keyframes, options)Primary signature.
el.animate(...)Call with the arguments your case needs.

Built into the browser. Call animate(...) on an Element — no import required.

Library declarations
JavaScript
el.animate(keyframes, options)

Parameters

ParameterDescription
keyframesRequired. What properties change over time
optionsRequired. Duration (number) or timing object

Return Value

Return ValueDescription
*Animation (already playing)

JavaScript Examples

Example 1 — Basic Keyframes

Rotate and scale an element with an options object.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");

box.animate(
  [
    { transform: "rotate(0) scale(1)" },

    { transform: "rotate(360deg) scale(0.5)" }
  ],
  { duration: 1000, iterations: 1 }
);

out.textContent = "animation started";
Try It Yourself

How It Works

  1. Define two keyframes. From/to transform values.
  2. Set timing. duration in ms; iterations how many times.
  3. Call animate(). Creates, applies, and plays immediately.
  4. No CSS file needed. The API drives the visual change.

Example 2 — Duration as a Number

Pass milliseconds as the second argument instead of an options object.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");

box.animate(
  { transform: ["translateX(0)", "translateX(80px)"] },
  800
);

out.textContent = "moved in 800ms";
Try It Yourself

How It Works

  1. Use a property map. { transform: [from, to] } is a valid keyframe form.
  2. Pass a number. MDN: an integer means duration in milliseconds.
  3. Keep it short. Great for one-shot motion without extra options.
  4. Need more control? Switch to an options object for easing / iterations.

Example 3 — Pause / Cancel

Keep the returned Animation so you can pause or cancel it.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");

const anim = box.animate(
  [
    { transform: "translateY(0)" },

    { transform: "translateY(-40px)" }
  ],
  { duration: 2000, iterations: Infinity }
);

document.getElementById("pause").onclick = () => {
  anim.pause();
  out.textContent = "paused";
};

document.getElementById("cancel").onclick = () => {
  anim.cancel();
  out.textContent = "canceled";
};
Try It Yourself

How It Works

  1. Store the return value. animate() gives you an Animation.
  2. Loop if needed. iterations: Infinity keeps it running.
  3. Pause. Stops playback without removing the effect immediately.
  4. Cancel. Stops and clears the animation effect.
Compatibility

Browser Support

Element.animate() is Baseline Widely available on MDN (across browsers since March 2020). It is not Deprecated, Experimental, or Non-standard. Core keyframes + timing are widely supported; timeline / animation-range options may need feature detection.

✓ Baseline Widely available

Element.animate()

Web Animations API shortcut — create, apply, and play. Widely available since 2020.

2020+ Widely available
Google Chrome 36+
Supported
Mozilla Firefox 48+
Supported
Apple Safari 13.1+
Supported
Microsoft Edge 79+
Supported
Opera 23+
Supported
Internet Explorer Not supported
Unavailable
animate() Baseline

Bottom line: Safe for modern browsers. Prefer CSS animations or a fallback for very old IE.

Frequently Asked Questions

It is a Web Animations API shortcut: it creates a new Animation, applies it to the element, plays it, and returns the Animation object so you can pause, cancel, or await finish (MDN).
No. MDN marks Element.animate() as Baseline Widely available (across browsers since March 2020). It is not Deprecated, Experimental, or Non-standard. Some options like scroll timeline ranges may have narrower support.
An Animation instance. Keep the reference if you need play(), pause(), cancel(), finished, or playbackRate.
Yes. Passing a number is treated as duration in milliseconds — for example el.animate(keyframes, 1000).
Yes. You can call animate() several times. Use Element.getAnimations() to list animations that currently affect the element.
CSS animations are declarative in stylesheets. animate() creates the same kind of animation from JavaScript with a returned Animation you can control in code.

Next: append()

Insert nodes or text after the last child of an element.

append() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

JavaScript Element after() Method JavaScript Element append() Method