1. 浏览器渲染原理

浏览器渲染过程

• 根据HTML构建HTML树（DOM）
• 根据CSS构建CSS树（CSSOM）
• 将两棵树合并成一颗渲染树（ render tree）
• Layout 布局
• Paint 绘制
• Composite合成

三种渲染方式

2. CSS 动画的两种做法（transition 和 animation）

transition

• 语法：
  transition: 属性名 时长 过渡方式 延迟;
• 可以用逗号分隔两个不同属性
  transition: width 200ms, height 1s;
• 过渡方式有：ease（初始值）/linear/ease-in/ease-out/ease-in-out等

有些属性不能过渡

display: none到block没法过渡
一般改成visibility: hidden到visibility: visible;

animation

• 语法：
  animation: 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名;
  其中
• 时长: 1s/1000ms
• 过渡方式: 跟transition取值一样，如ease（初始值）/linear/ease-in等
• 次数: 3/2.4/infinite
• 方向: reverse/alternate/ alternate-reverse
• 填充模式 : none/forwards/backwards/both
• 是否暂停: pause/running

@keyframes完整语法

一种写法是from/to

@keyframes slidein{
from{
transform: translateX(0%)
}
to{
transform: translateX(100%)
}
}

另一种写法是百分数

@keyframes identifier{
0%{
transform: none;
}
66%{
transform: translateX(200px)
}
100%{
transform: translateX(200px) translateY(100px);
}
}

---

资料来源： 饥人谷