Web Animations improvements in Chrome 50

Alex Danilo

The Web Animations API, which first shipped in Chrome 36, provides convenient JavaScript control of animations in the browser, and is also being implemented in Gecko and WebKit.

Chrome 50 introduces changes to improve interoperability with other browsers and to be more compliant with the spec. These changes are:

  • Cancel events
  • Animation.id
  • State change for the pause() method
  • Deprecation of dashed names as keys in keyframes

In Chrome 51, some of these changes are finalized:

  • Removing dashed names as keys in keyframes

Cancel events

The Animation interface includes a method to cancel an animation, funnily enough called cancel(). Chrome 50 implements firing of the cancel event when the method is called as per the spec, which triggers event handling through the oncancel attribute if it’s been initialized.

Support for Animation.id

When you create an animation using element.animate() you can pass in a number of properties. For example, here’s an example of animating opacity on an object:

element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);

By specifying the id property, it’ll be set on the Animation object returned which can help when debugging your content when you have lots of Animation objects to deal with. Here’s an example of how you’d specify an id for an animation you instantiate:

element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});

State change for the pause() method

The pause() method is used to pause an animation that’s in progress. If you check the state of the animation using the playState attribute it should be set to paused after the paused() method has been called. In Chrome versions prior to 50, the playState attribute would indicate idle if the animation hadn’t started yet, however now it reflects the correct state which is paused.

Removing dashed names as keys in keyframes

To further comply with the spec. and other implementations, Chrome 50 sends a warning to the console if dashed names are used for keys in keyframe animations. The correct strings to use are camelCase names as per the CSS property to IDL attribute conversion algorithm.

For example, the CSS property margin-left would require you to pass in marginLeft as the key.

Chrome 51 removes support for dashed names altogether, so now is a good time to correct any existing content with the correct naming as per the spec.

Summary

These changes bring Chrome’s implementation of Web Animations closer to other browsers implementations and more compliant with the specification which all helps simplify web page content authoring for better interoperability.