animation-direction 属性定义是否循环交替反向播放动画。

normal    默认值。动画按正常播放。 

reverse    动画反向播放。  

alternate    动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。

alternate-reverse    动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。    
css样式:
.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  margin: 50px auto;
  animation: myfirst 5s infinite;
  animation-direction: alternate;
}

@keyframes myfirst {
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }

  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }

  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }

  75% {
    background: green;
    left: 0px;
    top: 200px;
  }

  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}

代码演示:
202101271611749511839122