1.浏览器渲染原理

步骤

1. 根据 HTML 构建 HTML 树(DOM)
2. 根据 CSS 构建 CSS 树(CSSOM)
3. 将两棵树合并成一颗渲染树(render tree)
4. Layout 布局(文档流、盒模型、计算大小和位置)
5. Paint 绘制(把边框颜色、文字颜色、阴影等画出来)
6. Compose 合成(根据层叠关系展示画面)

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

transition(过渡)

transition 就是过渡的意思，作用就是我一个行为开头和结尾，然后中间我来帮你添加一个过渡的效果。

transition语法：

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */ 用逗号隔开
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */ 用all表示给所有Property添加动画
transition: all 0.5s ease-out;

注意

1. 可用逗号隔开不同属性，如 transition: margin-right 4s, color 1s;
2. 也可用 all 代表所有属性，如 transition:all 100m s;
3. 过渡方式有：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier/step- start/step-end/steps 等，具体含义要靠数学知识;
4. 不是所有属性都能用 transition ，如 display:none=>block ;
5. 如果有中间点，可使用两次 transition 。

animation(动画)

animation 组成部分

1. 关键帧 keyframes
2. animation 属性 因为我们可以在任意一个点指定关键帧，所以 animation 可以用来做更复杂的动画

animation语法：

animation 缩写语法 animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名

1. 时长：1s 或 1000ms
2. 过渡方式：跟 transition 取值一样
3. 次数：3 或者 2.4 或者 infinite
4. 方向：reverse | alternate | alternate-reverse
5. 填充模式：none | forwards | backwards | both
6. 是否暂停：paused | running 以上所有属性都有对应的单独属性

keyframes语法 1：

@keyframes zero {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

keyframes语法 2：

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

3.css 学习心得

还是需要通过不断地练习与实践巩固所学知识