We use cookies to enhance your experience on the site

animation-direction

In Egyptian mythology, the god Ra traveled in his solar barge across the sky from east to west (

normal

) every day, and at night returned underground from west to east (

reverse

). The entire cycle of day and night is a perfect example of alternating movement (

alternate

) - first in one direction, then the other.

The

animation-direction

property in CSS allows you to specify in which direction an animation should play. Thanks to this property, we can create animations that move forward, backward, or alternately.

Examples of Using animation-direction

Normal

The animation plays from beginning to end (default).

1.animation-normal {
2  animation-direction: normal;
3}

Reverse

The animation plays from end to beginning.

1.animation-reverse {
2  animation-direction: reverse;
3}

Alternate

The animation plays alternately: from beginning to end, then from end to beginning.

1.animation-alternate {
2  animation-direction: alternate;
3}

Alternate-Reverse

The animation plays alternately, but starts from end to beginning, then from beginning to end.

1.animation-alternate-reverse {
2  animation-direction: alternate-reverse;
3}

Example: Forward and Backward

We want an element to move and then return to its place.

CSS

1@keyframes slide {
2  0%, 100% { left: 0; }
3  50% { left: 100px; }
4}
5
6.slide-forward-backward {
7  position: absolute;
8  animation: slide 2s ease-in-out;
9  animation-iteration-count: 2; /* Two cycles */
10  animation-direction: alternate; /* Alternating direction */
11}

In this case, the element will first move 100 pixels to the right, and then return to its place. Thanks to

animation-direction: alternate

, the animation direction changes with each cycle.

HTML for the Example

To test this animation, create an HTML file and add an element with an assigned class:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>CSS Animations</title>
7  <style>
8    @keyframes slide {
9      0%, 100% { left: 0; }
10      50% { left: 100px; }
11    }
12
13    .slide-forward-backward {
14      position: relative;
15      animation: slide 2s ease-in-out;
16      animation-iteration-count: 2;
17      animation-direction: alternate;
18      width: 50px;
19      height: 50px;
20      background-color: lightcoral;
21      margin: 20px;
22    }
23  </style>
24</head>
25<body>
26  <div class="slide-forward-backward">Slide</div>
27</body>
28</html>

Task: Create an Animation Using Different Directions

Your task is to create an animation for three different elements. Each element should use a different

animation-direction

value:

Normal: The element should move in one direction from beginning to end.
Reverse: The element should move from end to beginning.
Alternate: The element should move alternately in both directions.

Steps to Complete:

Create an HTML file and add three elements that will be animated.
Define
```
@keyframes
```
for an animation that moves elements horizontally.
Apply the appropriate
```
animation-direction
```
properties to each element.
Add styles to a CSS file and load it in the HTML file.

Example:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>CSS Animations</title>
7  <style>
8    @keyframes slide {
9      0%, 100% { left: 0; }
10      50% { left: 100px; }
11    }
12
13    .animation-container {
14      position: relative;
15      width: 100px;
16      height: 50px;
17      margin: 20px;
18      background-color: lightblue;
19    }
20
21    .normal-animation {
22      animation: slide 2s linear infinite;
23      animation-direction: normal;
24    }
25
26    .reverse-animation {
27      animation: slide 2s linear infinite;
28      animation-direction: reverse;
29    }
30
31    .alternate-animation {
32      animation: slide 2s linear infinite;
33      animation-direction: alternate;
34    }
35  </style>
36</head>
37<body>
38  <div class="animation-container normal-animation">Normal</div>
39  <div class="animation-container reverse-animation">Reverse</div>
40  <div class="animation-container alternate-animation">Alternate</div>
41</body>
42</html>

Thanks to the

animation-direction

property, you have full control over the animation direction, allowing you to create more advanced and interesting visual effects on web pages.

Remember:

animation-direction

is like the pharaoh's command to the solar barge - you can order it to sail forward, backward, or alternately, creating a complete cycle of movement!

Try different animation directions in the editor below:

Go to CodeWorlds→