两者都用于设置动画
同样的地方：
1、指定了监听的css属性的变化
2、指定了变化时间
不同：
1、触发方式：transition需要通过hover或js事件来配合触发。animation不用显示触发，不需要触发时间就触发，定义动画则开始自动播放。animation用@keyframes规定动画
2、transition是过渡，是样式值的变化的过程，只有开始和结束。animation其实也叫关键帧，通过和keyframe结合可以设置中间帧的一个状态
3、animation可以设置很多属性，比如循环次数，动画结束的状态，transition只能触发一次。
4、性能方面：animation会改变很多属性，页面的回流和重绘对性能影响比较大，但用transition一般会结合transform进行旋转和缩放，不会生成新的位图，不会引起页面的重排。
animation
animation: name duration timing-function delay iteration-count direction;
timeing-funtion动画的速度曲线
属性值：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
京公网安备 11010502036488号