css3 animation-direction反向播放动画

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

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

reverse    动画反向播放。  

alternate    动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

alternate-reverse    动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。    

.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;
  }
}

代码演示：