Web animations API demos

Some simple demos to show Web Animations API features.

Implicit to/from keyframes

That is, when you write an animation, you can leave out the end state of the animation from the keyframes, and the browser will infer it, if it can. For example:

let rotate360 = [
  { transform: 'rotate(360deg)' }

See the demo live.

Automatically removing filling animations

It is possible to trigger a large number of animations on the same element. If they are indefinite (i.e., forwards-filling), this can result in a huge animations list, which could create a memory leak. For this reason, we’ve implemented the part of the Web Animations spec that automatically removes overriding forward filling animations, unless the developer explicitly specifies to keep them.

See a live demo of this.

The related JavaScript features are as follows: