CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



animation-direction

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.

Brief Explanation of Animation-Direction

The animation-direction property controls the direction of the animation. It can be set to one of four values:

  • normal: The animation plays forward from the beginning to the end.
  • reverse: The animation plays backward from the end to the beginning.
  • alternate: The animation plays forward from the beginning to the end, then backward from the end to the beginning, and so on.
  • alternate-reverse: The animation plays backward from the end to the beginning, then forward from the beginning to the end, and so on.

Let's take a look at some code examples to see how animation-direction works.

Code Examples

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.

Conclusion

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.

References

Activity