transition 和 animation 的区别

在 CSS 中，transition 和 animation 都可以用来控制元素的动态效果，但是它们在实现方式、应用场景、性能上有一些区别。 
 

1、 实现方式的区别

• transition：

过渡属性，强调过渡；通过在 CSS 属性的变化过程中进行过渡，从而产生动态效果。

它的实现需要手动触发，通过一个事件（比如鼠标移动上去，焦点，点击等)才执行动画。

而且 transition 触发一次播放一次。

它类似于 flash 的补间动画，设置一个开始关键帧，一个结束关键帧。

• animation：

动画属性；

需要使用 @keyframes 来注册一个动画效果，即帧来描述动画效果；

通过在关键帧（@keyframes）中定义动画状态，从而实现元素的动态变化效果。

它的实现不需要手动触发，是自动触发。可以设置很多的属性，比如循环次数，动画结束的状态等等；

它也类似于 flash 的补间动画，但是它可以设置多个关键帧 (用@keyframe定义) 完成动画。

2、 应用场景的区别

• transition：

用于实现简单的动态效果，例如鼠标悬停在一个元素上时，该元素背景色或透明度的变化。

• animation：

用于实现复杂的动态效果，例如元素的旋转、缩放、平移等复杂变换，以及多个动画状态之间的切换。

3、语法结构

• transition：需要指定过渡的属性、持续时间、过渡函数、延迟时间等参数：

transition-property：动画展示哪些属性，可以使用all关键字；

transition--duration：动画过程有多久；

transition-timing-function: linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等：控制动画速度变化；

transition-delay：动画延迟执行时间；

• animation：需要定义动画的名称、持续时间、运动曲线、动画状态等参数，例如：

animation-name：keyframes中定义的动画名称；
animation-duration：动画执行一次持续的时长；
animation-timing-function：动画速率变化函数；
animation-delay：动画延迟执行的时间；
animation-iteration-count：动画执行的次数，可以是数字，或者关键字（infinate）;
animation-direction：alternate(奇数次超前运行，偶数次后退运行)。
animation-fill-mode：告诉浏览器将元素的格式保持为动画结束时候的样子。

 

4、在性能方面

浏览器有一个主线程和排版线程；

主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；

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

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

 

5、总结

总的来说，transition 适用于实现简单的动态效果，而 animation 适用于实现复杂的动态效果。在选择使用哪种方法时，需要根据具体的需求进行判断。