CSS Animation Direction and Fill Mode

CSS Animation Properties

Three topics come up here: CSS animation direction, fill mode, and the shorthand property.

CSS animation-direction Property

An animation can run forwards, backwards, or in alternate cycles, and animation-direction decides which.

Its possible values are:

normal - The default, playing the animation forwards.
reverse - Playback runs backwards.
alternate - A forward run comes first, followed by a backward one.
alternate-reverse - A backward run comes first, followed by a forward one.

Reverse direction

Setting the value to reverse here makes the animation run backwards.

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with animation-direction set to reverse so it plays backwards.

> Output: complete HTML page

Prompt

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with animation-direction set to reverse so it plays backwards.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Reverse</title>
<style>
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-direction: reverse;
}

@keyframes myAnimation {
  0%   {background-color: red; left: 0px; top: 0px;}
  25%  {background-color: yellow; left: 200px; top: 0px;}
  50%  {background-color: blue; left: 200px; top: 200px;}
  75%  {background-color: green; left: 0px; top: 200px;}
  100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>

<h1>animation-direction: reverse</h1>
<p>The animation plays in reverse direction (backwards):</p>
<div></div>

</body>
</html>

Alternate direction

Thanks to alternate, this animation goes forwards on its first run and backwards on the next.

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with animation-iteration-count set to 2 and animation-direction set to alternate so it plays forwards then backwards.

> Output: complete HTML page

Prompt

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with animation-iteration-count set to 2 and animation-direction set to alternate so it plays forwards then backwards.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Alternate</title>
<style>
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes myAnimation {
  0%   {background-color: red; left: 0px; top: 0px;}
  25%  {background-color: yellow; left: 200px; top: 0px;}
  50%  {background-color: blue; left: 200px; top: 200px;}
  75%  {background-color: green; left: 0px; top: 200px;}
  100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>

<h1>animation-direction: alternate</h1>
<p>The animation plays forwards first, then backwards:</p>
<div></div>

</body>
</html>

Alternate-reverse direction

Thanks to alternate-reverse, the order flips: backwards on the first run and forwards on the next.

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with animation-iteration-count set to 2 and animation-direction set to alternate-reverse so it plays backwards first then forwards.

> Output: complete HTML page

Prompt

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with animation-iteration-count set to 2 and animation-direction set to alternate-reverse so it plays backwards first then forwards.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Alternate-Reverse</title>
<style>
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

@keyframes myAnimation {
  0%   {background-color: red; left: 0px; top: 0px;}
  25%  {background-color: yellow; left: 200px; top: 0px;}
  50%  {background-color: blue; left: 200px; top: 200px;}
  75%  {background-color: green; left: 0px; top: 200px;}
  100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>

<h1>animation-direction: alternate-reverse</h1>
<p>The animation plays backwards first, then forwards:</p>
<div></div>

</body>
</html>

CSS animation-fill-mode Property

Before the first keyframe plays and after the last one finishes, an animation has no effect on its element. That behavior is what animation-fill-mode lets you change.

The property decides which style the element has while the animation is not playing, whether before it starts, after it ends, or both.

Available values:

none - No styles carry over before or after the animation; this is the default.
forwards - Styles from the last keyframe stay on the element (which keyframe is last depends on animation-direction and animation-iteration-count).
backwards - The first keyframe's styles are applied to the element (which keyframe is first depends on animation-direction) and remain in place throughout the animation-delay period.
both - The rules of forwards and backwards apply together.

Fill mode forwards

Once the animation ends, the element holds on to the style values of the last keyframe.

Create a CSS animation that moves a red 100x100px div from left (0px) to right (250px) using @keyframes, with animation-fill-mode set to forwards so the element retains the last keyframe styles after the animation ends. Use a 3s duration.

> Output: complete HTML page

Prompt

Create a CSS animation that moves a red 100x100px div from left (0px) to right (250px) using @keyframes, with animation-fill-mode set to forwards so the element retains the last keyframe styles after the animation ends. Use a 3s duration.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Forwards</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes myAnimation {
  from {left: 0px;}
  to {left: 250px; background-color: yellow;}
}
</style>
</head>
<body>

<h1>animation-fill-mode: forwards</h1>
<p>The div retains the style values from the last keyframe when the animation ends:</p>
<div></div>

</body>
</html>

Fill mode backwards

During the delay period, before the animation starts, the element already shows the style values of the first keyframe.

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with a 2s animation-delay and animation-fill-mode set to backwards so the element gets the first keyframe styles during the delay period. The first keyframe should set background-color to yellow and left to 0px.

> Output: complete HTML page

Prompt

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with a 2s animation-delay and animation-fill-mode set to backwards so the element gets the first keyframe styles during the delay period. The first keyframe should set background-color to yellow and left to 0px.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Backwards</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes myAnimation {
  from {left: 0px; background-color: yellow;}
  to {left: 250px; background-color: blue;}
}
</style>
</head>
<body>

<h1>animation-fill-mode: backwards</h1>
<p>The div gets the style values set by the first keyframe before the animation starts (during the delay):</p>
<div></div>

</body>
</html>

Fill mode both

First keyframe styles appear before the start, and last keyframe styles stay after the end.

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with a 2s animation-delay and animation-fill-mode set to both so the element gets first keyframe styles before starting and retains last keyframe styles after ending. Use a 3s duration.

> Output: complete HTML page

Prompt

Create a CSS animation that moves a red 100x100px div from left to right using @keyframes, with a 2s animation-delay and animation-fill-mode set to both so the element gets first keyframe styles before starting and retains last keyframe styles after ending. Use a 3s duration.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Both</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes myAnimation {
  from {left: 0px; background-color: yellow;}
  to {left: 250px; background-color: blue;}
}
</style>
</head>
<body>

<h1>animation-fill-mode: both</h1>
<p>The div gets the first keyframe styles before starting and retains the last keyframe styles after ending:</p>
<div></div>

</body>
</html>

CSS Animation Shorthand Property

Separate lines for every animation property are not necessary: the shorthand animation property sets them all on a single line.

Longhand properties

Six separate animation properties are written out here.

Create a CSS animation using individual animation properties: animation-name myAnimation, animation-duration 5s, animation-timing-function linear, animation-delay 2s, animation-iteration-count infinite, and animation-direction alternate. The animation should move a red 100x100px div from left to right.

> Output: complete HTML page

Prompt

Create a CSS animation using individual animation properties: animation-name myAnimation, animation-duration 5s, animation-timing-function linear, animation-delay 2s, animation-iteration-count infinite, and animation-direction alternate. The animation should move a red 100x100px div from left to right.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Longhand Properties</title>
<style>
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes myAnimation {
  0%   {background-color: red; left: 0px; top: 0px;}
  25%  {background-color: yellow; left: 200px; top: 0px;}
  50%  {background-color: blue; left: 200px; top: 200px;}
  75%  {background-color: green; left: 0px; top: 200px;}
  100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>

<h1>Animation Using Individual Properties</h1>
<p>This example uses six individual animation properties:</p>
<div></div>

</body>
</html>

Shorthand property

With the shorthand animation property, the effect is identical to the example above.

Create a CSS animation using the shorthand animation property to combine all values in one line: animation: myAnimation 5s linear 2s infinite alternate. The animation should move a red 100x100px div from left to right.

> Output: complete HTML page

Prompt

Create a CSS animation using the shorthand animation property to combine all values in one line: animation: myAnimation 5s linear 2s infinite alternate. The animation should move a red 100x100px div from left to right.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Shorthand Property</title>
<style>
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation: myAnimation 5s linear 2s infinite alternate;
}

@keyframes myAnimation {
  0%   {background-color: red; left: 0px; top: 0px;}
  25%  {background-color: yellow; left: 200px; top: 0px;}
  50%  {background-color: blue; left: 200px; top: 200px;}
  75%  {background-color: green; left: 0px; top: 200px;}
  100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>

<h1>Animation Shorthand Property</h1>
<p>The same animation effect using the shorthand animation property:</p>
<div></div>

</body>
</html>