css animation both

CSS animation can be set to run in both directions using the `animation-direction` property. By default, it is set to `normal`, which means the animation plays forward from start to end.

To make an animation play in both directions, you can set the `animation-direction` property to `alternate`. This will cause the animation to play forward and then backward repeatedly. Here's an example:

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

In this example, the `.element` class is animated using the `slide` keyframe animation. The `animation-direction` property is set to `alternate`, causing the animation to play back and forth between the start and end states. The `animation-iteration-count` property is set to `infinite`, making the animation repeat indefinitely.