Animation Fill Mode

Specifications

The Animation–fill–mode determines what values are applied by the animation before and after the time it is running. Let’s look at an example:

Here we have four identical divs with the same animation running, apart from the animation–fill–mode property.

The animation has a 1 second delay, and then changes the background color from red to blue.

During the 1s delay, the "backwards" and "both" divs start out with a red background color, even though the background color was only set through the animation, and the animation hasn’t run yet. After the animation has finished, the "forwards" and "both" divs end with a blue background color—once again—despite the fact that no background styling has been applied to the div outside of the animation, and the animation is no longer running.

TL;DR Combine the fill–mode property with a delay or use it to control the state of the element after the animation has finshed running.

Animation Direction

Specifications

The animation–direction property indicates whether the animation iterations should play in reverse on alternate cycles.

Click the divs to watch the different values in action:

Animation Play State

Specifications

Animation play state allows you to pause an animation in the middle of it, and resume where it left off. Check it in the demo!

For the first div, we haven’t declared a hover state. This is sad. For the second, we’ve turned the animation off on hover — but this leads to a very unnatural snap as the element shifts back to its original position. In div three we finally got it right: The animation is paused on hover—allowing it to remain in its partially animated state—and resumed after we release. So smooth!

TL;DR The paused setting is a great alternative to turning the animation off completely (on hover, e.g.).

Common issues

• Animating an already transformed element.
• Animate on page load

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.