浏览器渲染原理

• 根据HTML构建HTML树（DOM）
• 根据css构建css树（cssom)
• 两颗树合并成一颗渲染树
• Layout布局（文档流 盒模型 文字颜色 计算大小位置）
• Paint 绘制（把边框颜色，文字颜色，阴影等画出来）
• Compose合成（根据层叠关系展示画面）

css动画的两种做法

第一种：transition

四个常用功能：

位移 transform:translate
缩放 transform:scale 放大/缩小
旋转 transform:rotate
倾斜 transform:skew

第二种：animation

动画 animation可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 一般来说两步的动画制作可以有两种方法：

可以有两次transform制作：

.a=== transform===.b

.b=== transform===.c

是否暂停: paused/running
方向: reverse（反过来）|alternate（交替的）|alternate-reverse （反过来交替）

这种是分步骤写关键帧：

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}