CSS二三事-（动画介绍）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/sanshiliuxiao/article/details/100689428

什么是动画

动画：许多静止的画面（称为帧），以一定的速度连续播放时，肉眼因视觉的残像产生错觉，而误以为是活动的画面。

帧：每一个静止的画面都称为帧。
播放速度： 以每秒播放多少帧表示，比如 每秒 24 帧（影视）或者每秒 30 帧（游戏）。

下面是使用 JavaScript 完全操作的一个简单动画，就是通过不断改变元素的

left

值，从而实现动画效果，但频繁通过 JS 去改变

dom

会导致性能不佳，为什么会这样呢？ 这是 JS 线程和渲染线程之间需要跨线程通信。

如果我们通过 CSS 直接去产生动画，那么性能就能大大提升， CSS给我们提供了两个动画属性，一个是

transition

， 另一个是

animation

。

transition

意为过渡 ， 一般来说只有两个状态，从初始态到最终态，其中的过渡态由浏览器自动进行补全。

animation

意为动画，比

transition

更为高级，它可以设置多个关键帧，制作出更加复杂的动画效果。

浏览器的渲染过程

• 根据 HTML 构建 HTML 树 （DOM）
• 根据 CSS 构建 CSS 树 （CSSOM）
• 然后 HTML 树 和 CSS 树 结合，生成 渲染树 （render tree）
• 进行布局 （Layout），包括 文档流、盒模型、计算大小和位置等。
• 进行绘制 （Paint），把边框颜色、文字颜色、阴影效果等画出来
• 最后合成 （Compose），根据层叠关系展示出画面。
  
  当 CSS 属性发生改变的时候，浏览器就会重新进行渲染，这里就会引发出新的概念，叫做重绘和回流。
  
  上图第一种情况称为回流， 它是指元素的大小和位置等发生改变，有可能导致重新布局，并且会发生重绘。
  上图第二种情况称为重绘，它是指元素的颜色，背景等发生改变，不会导致重新布局。
  上图第三种情况，既不会触发回流，又不会触发重绘，情况比较特殊。

如果想要查看哪些元素会触发回流，哪些元素会触发重绘，哪些元素既不会触发回流，也不会触发重绘，可以访问这个网站： csstriggers