HTML and CSS course · Module 6: CSS Animations
animation-direction
In this lesson4
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).
.animation-normal {
animation-direction: normal;
}Reverse
The animation plays from end to beginning.
.animation-reverse {
animation-direction: reverse;
}Alternate
The animation plays alternately: from beginning to end, then from end to beginning.
.animation-alternate {
animation-direction: alternate;
}Alternate-Reverse
The animation plays alternately, but starts from end to beginning, then from beginning to end.
.animation-alternate-reverse {
animation-direction: alternate-reverse;
}Example: Forward and Backward
We want an element to move and then return to its place.
CSS
@keyframes slide {
0%, 100% { left: 0; }
50% { left: 100px; }
}
.slide-forward-backward {
position: absolute;
animation: slide 2s ease-in-out;
animation-iteration-count: 2; /* Two cycles */
animation-direction: alternate; /* Alternating direction */
}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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animations</title>
<style>
@keyframes slide {
0%, 100% { left: 0; }
50% { left: 100px; }
}
.slide-forward-backward {
position: relative;
animation: slide 2s ease-in-out;
animation-iteration-count: 2;
animation-direction: alternate;
width: 50px;
height: 50px;
background-color: lightcoral;
margin: 20px;
}
</style>
</head>
<body>
<div class="slide-forward-backward">Slide</div>
</body>
</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
@keyframesfor an animation that moves elements horizontally. - Apply the appropriate
animation-directionproperties to each element. - Add styles to a CSS file and load it in the HTML file.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animations</title>
<style>
@keyframes slide {
0%, 100% { left: 0; }
50% { left: 100px; }
}
.animation-container {
position: relative;
width: 100px;
height: 50px;
margin: 20px;
background-color: lightblue;
}
.normal-animation {
animation: slide 2s linear infinite;
animation-direction: normal;
}
.reverse-animation {
animation: slide 2s linear infinite;
animation-direction: reverse;
}
.alternate-animation {
animation: slide 2s linear infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="animation-container normal-animation">Normal</div>
<div class="animation-container reverse-animation">Reverse</div>
<div class="animation-container alternate-animation">Alternate</div>
</body>
</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:
Code for this lesson: style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #8d6e2e, #c9a84c);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #3d2914;
}
.scene {
text-align: center;
padding: 20px;
}
h2 {
margin-bottom: 30px;
color: #3d2914;
}
.scroll-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.papyrus {
width: 300px;
background: linear-gradient(180deg, #f5deb3, #deb887, #d2b48c);
border-radius: 8px;
padding: 25px;
border: 3px solid #8d6e2e;
cursor: pointer;
overflow: hidden;
transform-origin: left center;
/* Add the transition here */
/* transition: transform 0.6s ease-in-out, box-shadow 0.6s ease; */
transform: scaleX(0.3);
}
/* Add a :hover effect for .papyrus */
/* .papyrus:hover { */
/* transform: scaleX(1); */
/* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); */
/* } */
.papyrus-content {
font-family: serif;
font-size: 16px;
line-height: 1.8;
color: #3d2914;
}
.hint {
margin-top: 30px;
color: #5a3d1a;
font-style: italic;
}Docs entries used in this lesson
Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. What does animation-direction: reverse do?
2. Which animation-direction value makes the animation play back and forth: forward, then backward?
These are 2 of 3 questions for this lesson. Solve the rest in the game.
Hands-on tasks in the game
- Click in order
Arrange the CSS declaration that sets the animation direction: