Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Web Animations Improvements in Chrome 50

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:

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.