相同：都会让你的页面元素动起来
区别：

过渡 transition

1.需要事件触发，比如hover，focus，checked , js改, @media query
2.一次性的
3.只能定义开始和结束状态，不能定义中间状态
举例：
transition: width 2s;

动画 animation

1.不需要事件触发
2.显示地随着时间的流逝，周期性的改变元素的css属性值。区别于一次性。
3.通过百分比来定义过程中的不同形态，可以很细腻
举例：
原生css实现闪烁的bling bling的效果

@keyframes bling-kf {
   0% { opacity: 1; }
   50% { opacity: 0.5; }
   100% { opacity: 1; }
}
.bling {
    animation: bling-kf 2s ease-in infinite;
}

不停的bling bling，很有趣的，:)

• transition 必须通过时间触发,animation不用
• transition 比较简单,animation定义更加详细的动画

transition 状态更改触发
animation 可循环触发

transition 是需要事件进行触发的，且只能触发一次。 无法定义中间的状态信息，类似Flash的关键帧，中间的补间动画无法详细定义
animation 无需事件触发，并且可以周期性播放。可定义中间状态。

• transition 定义的是元素可动画属性的计算值产生变化时，需要以怎样的方式过渡到目标值。可以定义过渡时间和过渡函数来控制过渡动画的效果，默认行为是瞬间切换成变化后的结果，即无动画。
• animation 使用 @Keyframes 预定义一系列动画进程中的关键帧，关键帧中可以指定任意可动画属性的值，然后只需要应用动画到你想要的元素上并指定时间，次数，缓动函数，状态，动画结束后的行为等。

区别：

• transition 当元素从一个状态到另一个状态时，为避免生硬的 UI 变化可以加入过渡动画效果以提升用户体验。
• animation 应用一组预定义好的 UI 变化来传达信息或提升交互体验。