JavaScript Element animate() Method

What You’ll Learn

Element.animate() is an instance method and a shortcut for the Web Animations API. It creates an Animation, applies it to the element, plays it, and returns the instance. Learn keyframes, timing options, implicit start/end states, and five try-it labs.

Introduction

CSS @keyframes define motion in stylesheets. animate() does the same idea from JavaScript: pass keyframes and timing, and the browser starts playing right away.

Because it returns an Animation object, you can pause, cancel, reverse, or await animation.finished when the run completes—handy for UI feedback and sequenced motion.

This page is part of JavaScript Element. Related topics include after() and the JavaScript hub.

Understanding the animate() Method

Calling el.animate(keyframes, options) builds a keyframe effect on el, starts playback, and hands back the live Animation.

• It is an instance method on Element (Animatable).
• Keyframes describe property values over time (array or object form).
• Options set duration, iterations, easing, fill, and more—or a plain duration number.
• Elements may run multiple animations; list them with getAnimations().
• Optional advanced fields: id, timeline, rangeStart, rangeEnd.

📝 Syntax

General form of Element.animate (MDN):

animate(keyframes, options)

Parameters

• keyframes — an array of keyframe objects, or a keyframe object whose properties are arrays of values to iterate over.
• options — either an integer duration in milliseconds, or an object with timing properties (and optional id, timeline, rangeStart, rangeEnd).

Common timing options

• duration — length of one iteration (ms).
• iterations — how many times to repeat (Infinity allowed).
• easing — timing function (for example "ease-in-out").
• delay — wait before starting (ms).
• direction — "normal", "reverse", "alternate", …
• fill — how styles persist before/after ("none", "forwards", "both", …).
• id — string name unique to animate() for referencing the animation.

Return value

Returns an Animation object instance.

Common patterns

el.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 400, easing: "ease-out" }
);

// Duration-only shorthand
el.animate({ transform: "translateX(40px)" }, 500);

const anim = el.animate(keyframes, options);
anim.pause();
await anim.finished;

Examples Gallery

Examples follow MDN Element.animate() patterns. Use View Output or Try It Yourself for each case.

const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});

(click the box — it spins and scales to 0 over 2s)

document.getElementById("tunnel").animate(
  [
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    duration: 1000,
    iterations: Infinity,
  },
);

(element scrolls upward repeatedly — never stops until cancel())

const logo = document.getElementById("logo");

// Single keyframe = end state; start inferred from current style
logo.animate({ transform: "translateX(300px)" }, 1000);

// offset: 0 → provided keyframe is the start; end inferred
logo.animate({ transform: "translateX(300px)", offset: 0 }, 1000);

(box slides using inferred from/to — click buttons in the lab)

const card = document.getElementById("card");

card.animate(
  {
    opacity: [0, 1],
    transform: ["translateY(12px)", "translateY(0)"],
  },
  {
    duration: 600,
    easing: "ease-out",
    fill: "forwards",
  },
);

(card fades/slides in and stays visible — fill: forwards)

const box = document.getElementById("box");
const anim = box.animate(
  [
    { transform: "translateX(0)" },
    { transform: "translateX(120px)" },
  ],
  { duration: 2000, iterations: Infinity, direction: "alternate" },
);

document.getElementById("pause").onclick = () => anim.pause();
document.getElementById("play").onclick = () => anim.play();
document.getElementById("stop").onclick = () => anim.cancel();

Animation { playState: "running" }
(use Pause / Play / Cancel in the lab)

🚀 Common Use Cases

• Click feedback: scale, shake, or spin a button or card.
• Enter/exit transitions for dialogs, toasts, and list items.
• Loading indicators that loop until you cancel().
• Sequencing motion with await animation.finished.
• Dynamic motion when values come from JS (distance, color, delay).
• Teaching Web Animations alongside CSS @keyframes.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available since March 2020).
• Some options (timeline, rangeStart, rangeEnd) have narrower support—check compatibility when using scroll/view timelines.
• Prefer animating transform and opacity for smoother performance.
• Use fill: "forwards" when the end visual state must remain.
• Related: after(), children, JavaScript hub.

💡 Best Practices