transition 和 animation

他们都是随时间改变元素的属性值

1. transition

<div class="box"></div>

.box {
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background-color: #00b3f1;
      /* transition: 哪个属性动 运动在多长时间完成 延迟时间 运动类型；*/
      transition: all .5s linear;
 }

.box:hover {
      width: 300px;
      height: 300px;
}

（1）transition 需要去触发比如：点击事件、鼠标移入事件；

（2）transition 触发一次播放一次；

（3）transition关注的是样式属性的变化，属性值和时间的关系是一个三次贝塞尔曲线；

（4）用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了。

2. animation

<div class="box"></div>

.box {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: #00b3f1;

    animation-duration: 1s;                 /* 动画时间 */
    animation-name: fillout;                /* 通过name使用 */
    animation-iteration-count: infinite;    /* 循环次数，infinite（无限次循环） */
  }

@keyframes fillout {
    from {
        width: 200px;
        height: 200px;
    }
    to {
        width: 400px;
        height: 400px;
    }
 }

（1）animation 可以配合 @keyframe 可以不触发事件就触发这个动画；

（2）animation 则是可以设置很多的属性，比如循环次数，动画结束的状态等等；

（3）animation 作用于元素本身而不是样式属性，可以使用关键帧的概念，可以实现更自由的动画效果；

（4）使用 aniamtion 的时候可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大；