Animations

Animations are essentially timed transitions. You can define several steps and break-points in the transition of one set of styles to another. If that’s done properly an animation results.

This page only tests the animation properties. If the underlying transition is not supported you can expect problems.

Vendor prefixes

Here are tests for the vendor prefixes. Click on the test elements. These are also tests for keyframes, animation-name, animation-duration, and width.

Delay

A delay of one second.

Iteration-count

The animation is repeated twice.

Direction

The second time the animation plays, will it play it the same as the first time or reversed?

Fill-mode

What happens to the element during an animation-delay? What happens after the animation has ended? forwards specifies the styles of the last keyframe will remain applied after the animation has ended, while backwards says the styles of the first keyframe will be applied during the delay. both says both should occur. The default is none: do nothing.

There’s a delay of 1 second.