写个简单css动画，transition 和animate

先写个普通的不动的球

.ball{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f69;
}

然后加上一个神奇的属性transform，可以让小球偏移原来的位置（transform有很多玩法，这里展示移动）

.ball{
  /* ...  */
  transform: translate(200px,0);
}

transition：动作触发，一次性动画

让其动起来

.ball{
  /* ...  */
  transform: translate(200px,0);
  transition: 1s linear;
}
.ball:hover{
  /* ...  */
  transform: translate(0,0);
}

但transition的毛病就是，必须某种动作触发（hover active巴拉巴拉），然后一次性动画。

需要复杂些的动画就需要animation

animation:随时触发，可控性很强

上面的换成animation：

  .ball {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: #f69;
    animation: move 2s linear;
  }

  @keyframes move {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(200px, 0);
    }
  }

球一开始就运动，但是运动完之后，秒回动画前的位置，也就是很突然的感觉，想改变的话，两种方式：

• 第一种常想到的方式：设置动画的100%处就是动画前的状态，这样结束时就和动画前的状态一致了。

  @keyframes move {
    0%,100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(200px, 0);
    }
  }

• 第二种：设置动画填充模式forwards，动画结束之后，就让小球在100%的状态

/* backwards是有延迟时让小球在动画开始前，在0%的状态。both是动画开始前和结束后一个0%,一个100%的状态 */
.box{animation: move 2s linear forwards;}

大牛老姚的animation的8个属性的介绍，非常棒

无限播放：基本结合alternative

实现一直在动的话

.ball {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f69;
  /* alternate很关键，正向和反向交替进行，先从0%->100%，然后100%->0%，这样才有一直动的效果 */
  animation: move 2s linear alternate infinite;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(200px, 0);
  }
  
  
}