CSS animations are a great way to add visual interest and interactivity to a website. One of the key features of CSS animations is the ability to control the direction of the animation. This is where the animation-direction property comes in.
The animation-direction property controls the direction of the animation. It can be set to one of four values:
Let's take a look at some code examples to see how animation-direction works.
Here's an example of an animation with the animation-direction set to normal:
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-direction: normal;
}
@keyframes example {
from {transform: translateX(0);}
to {transform: translateX(200px);}
}
In this example, the box moves from left to right over a period of 2 seconds.
Now let's take a look at an example with the animation-direction set to reverse:
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-direction: reverse;
}
@keyframes example {
from {transform: translateX(200px);}
to {transform: translateX(0);}
}
In this example, the box moves from right to left over a period of 2 seconds.
Next, let's look at an example with the animation-direction set to alternate:
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-direction: alternate;
}
@keyframes example {
from {transform: translateX(0);}
to {transform: translateX(200px);}
}
In this example, the box moves from left to right, then from right to left, and so on, over a period of 2 seconds.
Finally, let's look at an example with the animation-direction set to alternate-reverse:
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-direction: alternate-reverse;
}
@keyframes example {
from {transform: translateX(200px);}
to {transform: translateX(0);}
}
In this example, the box moves from right to left, then from left to right, and so on, over a period of 2 seconds.
The animation-direction property is a powerful tool for controlling the direction of CSS animations. By setting the animation-direction to one of the four available values, you can create a wide range of animations that add visual interest and interactivity to your website.