CSS3的transition和animation到底有什么区别?

现在的CSS3尤其在移动端可谓是大行其道,各式各样的应用、小游戏层出不穷,那么动画肯定是这些应用里面不可或缺的一部分。可能有的同学就会问了,经常会看到transition和animation,那么它们到底有什么区别呢?

CSS3的transition和animation到底有什么区别?

transition是单个属性单段变化,关注点在起始和终止两个状态间的迁移,应该算是直接改属性的高级版本。
animation是多个属性多段变化,主要用于从视觉上描述一段过程,它可以是循环的,也可以是单次的。

也有人形象的比喻transition有点像:hover,animation则像flash。

transition强调过渡,transition + transform = 两个关键帧的动画。
animation强调流程与控制,duration + transform + control = 多个关键帧的动画。
如果只有两个关键帧我会选择transition,复杂动画就要考虑用animation。

animation属于关键帧动画的范畴,它本身被用来替代一些纯粹表现的javascript代码而实现动画。基于animation和@keyframe 的动画一方面也是为了实现表现与行为的分离,另一方面也使得前端设计师可以专注得进行动画开发而不是冗余的代码中。同时,它还应该被用来提高动画的渲染性能,当然,渲染性能这是浏览器的事情,目前看来,三大主流内核的animation/@keyframe的性能都不算高,但随着浏览器厂商的升级,不久的将来,渲染性能应该不会低于原生app。

相关阅读