transition与animation的区别

1、transition 需要去触发比如：点击事件、鼠标移入事件；而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画
2、transition 触发一次播放一次；而 animation 则是可以设置很多的属性，比如循环次数，动画结束的状态等等；
3、transition关注的是样式属性的变化，属性值和时间的关系是一个三次贝塞尔曲线；而animation作用于元素本身而不是样式属性，可以使用关键帧的概念，可以实现更自由的动画效果；
4、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了。

transition

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

语法

/* 应用于1个属性 */
/* 属性值 | 持续时间 */
transition: margin-right 4s;

/* 属性值 | 持续时间 | 延迟 */
transition: margin-right 4s 1s;

/* 属性值 | 持续时间 | 持续时间 | 动画效果 */
transition: margin-right 4s ease-in-out;

/* 属性值 | 持续时间 | 动画效果 | 延迟 */
transition: margin-right 4s ease-in-out 1s;

/* 同时应用2个属性*/
transition: margin-right 4s, color 1s;

/* 应用于所有属性 | 持续时间 | 动画效果 */
transition: all 0.5s ease-out;

/* 全局变量 */
transition: inherit;
transition: initial;
transition: unset;

animation

Animation属性用来指定一组或多组动画，每组之间用逗号相隔.

语法

/* 持续时间 | 动画效果 | 延迟 | 重复次数 | 方向 | 过渡方式 | 是否暂停 | 动画名 */
animation: 3s ease-in 1s 2 reverse both paused xxx;

/* 持续时间 | 动画效果 | 延迟 | 动画名 */
animation: 3s linear 1s xxx;

/* 持续时间 | 动画名 */
animation: 3s xxx;

animationg: 0.5s/*时间，也可简写为.5s*/ 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

方向：reverse:与原方向逆向; alternate: 循环重复；
过渡方式：line：线性；ease：舒缓；
延迟：多长时间后开始；
填充模式：none：无；forwards：最后一步停止不返回原位置;
是否暂停：paused：暂停;running：开始;
重复次数：infinite：持续不断重复；详情可查看[MDN文档]( animation )

@keyframes

使用 animation 时我们还要用到 @keyframes 它可通过在动画序列中定义关键帧（或waypoints）的样式来达到控制 CSS 动画序列中的中间步骤的功能。和 transition 相比，@keyframes 可以控制动画序列的中间步骤。

样例

@keyframes xxx {
  from {
    transform: translateX(0%); 
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes xxx {
  0% {
    transform: translateX(0%); 
  }

  50% {
    transform: translateX(50%);
  }
   100% {
    transform: translateX(100%);
  }
}

CSS 动画的两种做法（transition 和 animation）

transition与animation的区别

transition

animation

@keyframes