Core API
element.animate()
Platform under construction
Web Animations API
The Web Animations API controls keyframe animations from JavaScript.
card.animate(
[{ transform: "scale(.96)" }, { transform: "scale(1)" }],
{ duration: 220, easing: "ease-out" }
);
Graphics, Media & UI
Web Animations API connects JavaScript to visual interfaces.
The Web Animations API controls keyframe animations from JavaScript.
Visual JavaScript should make state easier to understand. The code must stay connected to real data, user intent and accessibility.
A polished interface is not only animation. It is timing, feedback, labels, fallback states and predictable interaction.
Visual goal
Use motion or graphics to explain state, not to distract from it.
Accessibility
Keep text, labels and keyboard alternatives available.
Performance
Avoid layout-heavy loops and unnecessary repaints.
Examples
Visual JavaScript should clarify the interface.
Let JavaScript express visual state clearly
card.animate(
[{ transform: "scale(.96)" }, { transform: "scale(1)" }],
{ duration: 220, easing: "ease-out" }
);
Create visuals without data or accessibility
setInterval(() => {
element.style.left = Math.random() * 100 + "px";
}, 16);
Code patterns
Reusable examples for quick reference.
Use these examples when turning data, state and interaction into something visible.
Working visual pattern
A direct example of the topic.
card.animate(
[{ transform: "scale(.96)" }, { transform: "scale(1)" }],
{ duration: 220, easing: "ease-out" }
);
Weak visual pattern
A shortcut that makes the interface fragile.
setInterval(() => {
element.style.left = Math.random() * 100 + "px";
}, 16);
Respect reduced motion
Users may ask the browser for less animation.
const prefersReducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!prefersReducedMotion) {
element.animate(keyframes, options);
}
Keep labels in the DOM
Visuals should not be the only source of meaning.
<figure> <canvas aria-label="Monthly revenue chart"></canvas> <figcaption>Revenue increased over four months.</figcaption> </figure>
Rules that matter
Richer UI needs richer responsibility.
Motion, canvas and drag/drop can improve a product, but only when they stay usable and understandable.
Connect visuals to data
Do not hard-code charts or status when data should drive them.
Keep text alternatives
Canvas, charts and drag/drop need labels or fallback content.
Use CSS for simple motion
JavaScript should orchestrate, CSS can animate state.
Avoid layout loops
Repeated measurements and writes can hurt performance.
Respect user preferences
Reduced motion and keyboard use are part of production design.
Test different input methods
Mouse, keyboard and touch can behave differently.
Production thinking
Ship visual code that remains readable, fast and accessible.
Why does this matter?
Graphics and interaction are where users feel quality immediately. Small implementation choices decide whether the UI feels smooth or chaotic.
Accessibility
Visual UI needs semantic labels, focus management, reduced motion support and alternatives for pointer-only behavior.
Production note
Production visual code should be measured, tested on real devices and kept separate from business logic where possible.
SEO note
Important text should not exist only inside canvas pixels or animation frames.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Change one visual value and run the example again.
- Add one text label that explains the visual state.
- Describe what should happen if animation is disabled.
Practice assignment
Do this before moving to the next topic.
- Build the simplest static version first.
- Add JavaScript to update one visible state.
- Check that a user can still understand the UI without relying only on motion.
Try it yourself
Experiment with Web Animations API
Self-check
Before you continue, prove that you understand Web Animations API.
Answer these before moving to the next graphics and UI lesson.
- What data or state drives this visual behavior?
- Where is the accessible label or explanation?
- Could CSS handle part of this interaction more cleanly?
- What performance risk exists?
- How would this work for keyboard or reduced-motion users?
Senior audit upgrade
Extra production context for Web Animations API.
Compatibility note: motion
Last reviewed: 11 June 2026. Check support and respect reduced-motion preferences. Animation should never be the only way information is communicated.
Motion and input checklist
- Respect prefers-reduced-motion.
- Keep keyboard and touch alternatives available.
- Do not rely on drag, hover or animation as the only path.
- Prefer transform and opacity for smooth UI animation.