Web Animations API Cheat Sheet

Native browser Element.animate() syntax, keyframes, timing options, and playback control without a CSS or JS animation library.

2 PagesIntermediateJan 29, 2026

Element.animate() Basics

Animate an element directly via JS with keyframes and options.

javascript

const el = document.querySelector('.box')const animation = el.animate(  [    { transform: 'translateX(0)', opacity: 1 },    { transform: 'translateX(200px)', opacity: 0.5 },  ],  {    duration: 500,    easing: 'ease-in-out',    fill: 'forwards',    iterations: 1,  })

Controlling Playback

Pause, reverse, and react to animation lifecycle events.

javascript

animation.pause()animation.playbackRate = 2      // 2x speedanimation.reverse()animation.play()animation.finished.then(() => {  console.log('animation complete')})animation.onfinish = () => el.classList.add('done')animation.oncancel = () => console.log('cancelled')

Property-Indexed Keyframes

Shorthand syntax when each property's values simply interpolate in order.

javascript

el.animate(  {    transform: ['scale(1)', 'scale(1.2)', 'scale(1)'],    offset: [0, 0.5, 1],   // explicit keyframe offsets  },  { duration: 800, iterations: Infinity, easing: 'ease-in-out' })

ScrollTimeline (Scroll-Driven Animation)

Drive an animation's progress by scroll position instead of wall-clock time.

javascript

const progress = document.querySelector('.progress-bar')progress.animate(  { transform: ['scaleX(0)', 'scaleX(1)'] },  {    fill: 'forwards',    timeline: new ScrollTimeline({ source: document.documentElement }),  })

KeyframeEffectOptions Reference

The timing dictionary passed as the second argument to animate().

duration- length of one iteration in ms
easing- timing function, e.g. 'linear', 'ease', 'cubic-bezier(.17,.67,.83,.67)'
delay / endDelay- ms before start / after end before the animation is considered finished
iterations- number of repeats, or Infinity
direction- 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'
fill- 'none' | 'forwards' | 'backwards' | 'both' — whether styles persist outside active phase
composite- 'replace' | 'add' | 'accumulate' — how this animation combines with others on the same property

Pro Tip

Use `animation.commitStyles()` plus `animation.cancel()` instead of leaving `fill: 'forwards'` animations running indefinitely — committed styles move the final state into the actual CSS, freeing the browser from holding an active animation object in memory.

Was this cheat sheet helpful?

HTMX + Alpine.js Patterns Cheat Sheet

CSS Container Queries Cheat Sheet

Explore Topics

#WebAnimationsAPI#WebAnimationsAPICheatSheet#WebDevelopment#Intermediate#ElementAnimateBasics#ControllingPlayback#PropertyIndexedKeyframes#ScrollTimeline#APIs#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services