1. 浏览器渲染原理。

为了能够在浏览器上显示流畅清晰的动画，面对市场上主流的60hz显示器，浏览器需要将每一帧的渲染时间在16ms完成画面渲染。浏览器简单的渲染过程分为：Javascript -->样式-->布局-->绘制-->合成。细分过程，就是根据HTML构建DOM(HTML树)；然后根据 CSS 构建 CSSOM(CSS树)；将两个树 DOM 和CSSOM 合成一棵 Render tree；接下来考虑布局，也就是文档流、盒模型、计算大小和位置等；最后经过绘制，将边框颜色，文字颜色，阴影等画出来，根据层叠关系，在浏览器上展示画面。下面为 DOM 和 CSSOM 合成 Render Tree 的简单过程。

2. CSS动画的两种做法( transition 和 animation)。

答：css动画的有两种常见做法，分别是transition和animation。

transition：作用就是给整个动画过程添加中间帧。

后面可以携带四种参数：属性名称，过渡的时长，过渡的方式以及延迟。过渡方式常见取值有linear(匀速),ease(默认),ease-in（速度先慢后快），ease-out(速度先快后慢)，ease-in-out(速度先慢中间比较快，后慢)。常见的和transform使用，但是transition知识触发了特定的规则，也可以单独使用。演示代码如下：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#heart {
  margin: 100px;
  position: relative;
  display: inline-block;
  transition: all 0.5s ease;
}
#heart:hover{
  transform:scale(1.5);
}

animation：单词的意思就是动画。

animation的参数一部分和transition类似，都有时长，延迟和过渡方式；但是它还有一些其他常见的参数，如次数，方向，填充模式，是否暂停。方向可以选择reverse，alternate和alternate-reverse等；填充模式有forwards,backwards,both和none；暂停据只有paused和running。另外，animation需要声明关键帧@keyframe。演示代码如下。

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#heart {
  margin: 100px;
  position: relative;
  display: inline-block;

}
#heart.start{
    animation: heart 0.8s infinite alternate-reverse;
}
@keyframes heart{
  0%{
    transform:scale(1.0);
  }
  100%{
    transform:scale(1.5);
  }
}

transform：转变

这是一个静态属性，用于改变默认位置下的一些数值。

位移translate：translateX(100px);trnaslateY(100px);
位移缩写translate：transform:translate(x,y); transform3d(x,y,z);
缩放scale：transform:scale(1.5);
旋转rotate：transform: rotate(45deg); 默认顺时针方向。
倾斜skew：transform:skewx(45deg); 默认向左倾斜。

3. 总结

CSS不像其他语言一样，存在一些逻辑关系，如果遇见一个不懂的函数，其他语言可以通过名字，大致了解它的作用以及会产生什么影响。但是，CSS学习不需要很强的逻辑关系，反而需要一些想象力，你想到什么好点子或方式，只需要往上添加，没有为什么，just do it就行。

CSS知识总结