Summary

  • The W3C’s June 2013 Web Animations first public draft proposed a timing and effect model spanning the common behavior of CSS Transitions, CSS Animations and SVG animation.
  • The 2014 draft paired that model with a script interface for creating browser-run animations; the 2023 Level 1 text specifies current time, playback state, pausing, reversing, finishing and canceling. The site chooses when the reader needs those controls.

The stage crew has a problem. One graphic enters through a CSS transition, another loops through CSS keyframes, a third follows an SVG animation. The motions may look related to the audience, but the author must reason about several accounts of time. Want the reader to pause a sequence and inspect the drawing? Want a return visit to rewind a step rather than replay the entire introduction? Putting a JavaScript timer beside every moving piece would make the editor the clockmaker, stagehand and audience usher at once.

The W3C’s first public Web Animations draft of 25 June 2013 began with a structural observation. CSS Transitions, CSS Animations and SVG had similar ways of generating motion but described them in different terms. The proposed model gathered their common timing and effect concepts under one roof. An animation would have a relationship to a timeline, an active interval, an effect and a result that could be combined with other effects. The point was a common grammar for motion; the editor could then decide what story the motion should tell.

The 5 June 2014 draft made the two sides of that arrangement clearer. It described an abstract animation model intended to encompass the three existing mechanisms and a programming interface for authors. A script could create an animation, but once created the user agent executed it. That is a different division of work from a page callback calculating and painting every intermediate frame itself. The draft also situated this interface beside requestAnimationFrame and specified how their time values and execution order related. The browser supplied the clockwork; script could still choose when to start or steer it.

That division matters when an animation is more than decoration. A reader may need to hold a diagram halfway through a movement, then proceed after reading its label. A teacher may want to reverse the motion of a network path to show where a packet came from. The common model gives the page a way to think in terms of an animation’s current time, rate and state. It does not make every creative decision for the publisher. It makes those decisions expressible through a shared machine rather than through three separate private timers.

The 11 October 2018 Level 1 draft continued the architecture of timelines, animation objects and effects. The separation is useful: the effect describes what changes, the timeline supplies a progress clock, and playback state says whether the animation is running, waiting, paused or finished. An author can change the story’s pacing without having to redefine the drawing at each frame. This is the quiet innovation behind the visible controls. Rewind is possible because “where are we in time?” has a coherent answer.

The 5 June 2023 draft spells out the control desk in detail. It defines setting current time and start time; play and pause operations; finished and canceled states; playback rates, including reverse direction; and events or promises around readiness and finishing. These controls have precise state transitions because “pause now” can arrive while an animation is starting, finishing or changing rate. The editor presses a button, but the browser must settle exactly which frame belongs on the stage. A sloppy clock would turn the rewind button into a jump cut.

The W3C publication history dates the journey from the 2013 first public draft through the 2014, 2018 and 2023 texts. The arc is distinct from the later question of using a scroll position as an animation timeline. Here the decisive move was giving existing animation families a common account of time and a script-facing playback interface. The editor still decides whether motion clarifies a page, when to let a reader pause it and which moment deserves a return trip. The browser keeps the shared clock running. Nobody has to chase three stagehands with three stopwatches.