| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The animation-direction property in CSS specifies whether an animation should play forwards, backwards, or in alternate cycles. It can take four possible values: normal, reverse, alternate, and alternate-reverse.
Syntax
animation-direction: normal | reverse | alternate | alternate-reverse;
Values
- normal (default): The animation plays forwards each cycle.
- reverse: The animation plays backwards each cycle.
- alternate: The animation alternates direction every cycle, playing forwards first, then backwards, then forwards again, and so on.
- alternate-reverse: The animation alternates direction every cycle, playing backwards first, then forwards, then backwards again, and so on.
Examples
Let’s look at each of these values with a simple animation example.
Basic HTML and CSS Setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Direction</title>
<style>
.box {
width: 50px;
height: 50px;
background-color: red;
margin: 50px;
}
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
</style>
</head>
<body>
<div class="box" id="normal"></div>
<div class="box" id="reverse"></div>
<div class="box" id="alternate"></div>
<div class="box" id="alternate-reverse"></div>
<script>
const normalBox = document.getElementById('normal');
const reverseBox = document.getElementById('reverse');
const alternateBox = document.getElementById('alternate');
const alternateReverseBox = document.getElementById('alternate-reverse');
normalBox.style.animation = 'move 2s linear infinite normal';
reverseBox.style.animation = 'move 2s linear infinite reverse';
alternateBox.style.animation = 'move 2s linear infinite alternate';
alternateReverseBox.style.animation = 'move 2s linear infinite alternate-reverse';
</script>
</body>
</html>
Explanation
- normal: The animation will move the box from left to right (0% to 100% keyframes).
normalBox.style.animation = 'move 2s linear infinite normal';
2. reverse: The animation will move the box from right to left (100% to 0% keyframes).
reverseBox.style.animation = 'move 2s linear infinite reverse';
3. alternate: The animation will move the box from left to right in the first cycle and from right to left in the next cycle, alternating directions.
alternateBox.style.animation = 'move 2s linear infinite alternate';
4. alternate-reverse: The animation will move the box from right to left in the first cycle and from left to right in the next cycle, alternating directions.
alternateReverseBox.style.animation = 'move 2s linear infinite alternate-reverse';
Detailed Breakdown
normal:
- The animation progresses from the starting keyframe to the ending keyframe.
- Example: The box moves from
translateX(0)totranslateX(200px).
reverse:
- The animation progresses from the ending keyframe to the starting keyframe.
- Example: The box moves from
translateX(200px)totranslateX(0).
alternate:
- The animation alternates between playing forwards and backwards.
- First cycle: The box moves from
translateX(0)totranslateX(200px). - Second cycle: The box moves from
translateX(200px)totranslateX(0).
alternate-reverse:
- The animation alternates between playing backwards and forwards.
- First cycle: The box moves from
translateX(200px)totranslateX(0). - Second cycle: The box moves from
translateX(0)totranslateX(200px).
These examples illustrate how the animation-direction property affects the direction in which an animation is played. By using different values, you can create more dynamic and interesting animations.
