CSS二三事-（动画介绍）

什么是动画

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

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

下面是使用 JavaScript 完全操作的一个简单动画，就是通过不断改变元素的 left 值，从而实现动画效果，但频繁通过 JS 去改变 dom 会导致性能不佳，为什么会这样呢？ 这是 JS 线程和渲染线程之间需要跨线程通信。

如果我们通过 CSS 直接去产生动画，那么性能就能大大提升， CSS给我们提供了两个动画属性，一个是 transition， 另一个是 animation。transition 意为过渡 ， 一般来说只有两个状态，从初始态到最终态，其中的过渡态由浏览器自动进行补全。animation 意为动画，比 transition 更为高级，它可以设置多个关键帧，制作出更加复杂的动画效果。

浏览器的渲染过程

• 根据 HTML 构建 HTML 树 （DOM）
• 根据 CSS 构建 CSS 树 （CSSOM）
• 然后 HTML