浏览器渲染原理
1.解析HTML标签，构建HTML树（DOM）。
2.解析CSS标签，构建CSS树（CSSOM）。
3.把DOM和CSSOM组合成一颗渲染树（render tree）。
4.在渲染树的基础上进行Layout布局，计算每个节点的几何结构（文档流、盒模型、计算大小和位置）。
5.将各个节点绘制到屏幕上：Paint绘制（把边框颜色、文字颜色、阴影等画出来），Compose合成（根据层叠关系展示画面）。
CSS动画的两种做法
动画的原理
动画的形成依托于人类视觉所具有的“视觉暂留”特性，所以理论上来说只要短时间内做出连续的变化，就能形成动画。
在CSS3未推广前，人们普遍利用JavaScript来修改节点的位置，来做到动画效果。但是我们从浏览器的渲染原理可以发现，这种做法会让浏览器在动画过程中不断的渲染页面，从而造成性能的浪费，特别现在是移动端的世界，这种做法是不能接受的。
好在CSS3推出了2种CSS属性，transition和animation，在CSS上面就做到我们想要的动画效果，避免了性能的浪费。
transition（过渡）
简写语法：transition:property duration timing-function delay;
transition 其实是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写形式：
transition-property:指定哪个或哪些 CSS 属性用于过渡。transition-duration：指定过渡的时长。transition-timing-function：指定一个函数，表示变化的速度曲线（各种函数曲线，背后都是数学）。transition-delay:指定延迟，即多久开始发生变化。 一个简单的demo：
.box{
width: 100px;
height: 100px;
background-color: red;
transition:width 2s, height 2s,background-color 2s;
/* transition:all 2s 更快捷的写法 全部设置2s*/
}
.box:hover{
background-color:blue;
width:200px;
height:200px;
}
animation（动画）
简写语法animation: name duration timing-function delay iteration-count direction fill-mode play-state
- name :指定的@keyframe名称
- duration: 指定一段动画的时常，比如1s或者1000ms
- timing-function：指定动画的速度曲线，与
transition取值一样，如linear - delay：指定延迟时间。
- iteration-count:指定动画的次数,可以取值
infinite无限 - direction：指定动画是否可以反向播放，取值
reverse|alternate|alternate-reverse - fill-mode：指定动画在播放之前或之后，其动画效果是否可见。
- play-state：指定是否暂停动画
我们在使用anmiation属性时，需要配合使用@keyframes来控制动画中的中间步骤。
使用@keyframes建立两个或两个以上关键帧，每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
@keyframes使用百分比来指定动画发生的时间点，0%表示动画的第一时刻，100%表示动画的最终时刻。因为这2个时间点十分重要，所以还有特殊的别名：from和to。
比如：
一个简单的demo：
.box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 2s alternate infinite
}
@keyframes move {
from {
left:0px;
}
to {
left:200px;
}
}
一些有趣的CSS属性
transform（变形）
语法：transform: none|transform-functions;
transform是个很强大的属性，它提供了很多方法，其中常用有translate(位移),scale（变形），rotate（旋转），skew（倾斜）。这些方法可以帮助我们改变一个元素的形状，做到一些有趣的效果。
比如我们可以利用transform和transition，组合起来做一些很有意思的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
*{
box-sizing:border-box;
}
#heart{
margin:100px;
display: inline-block;
position:relative;
transition:all 1s;
}
#heart:hover{
transform:scale(1.5) rotate(180deg);
}
#heart>div{
background-color:red;
width:50px;
height: 50px;
}
#heart>.left{
position: absolute;
bottom:50px;
left:-50px;
transform:rotate(-45deg) translateY(30px);
border-radius:50% 50% 0 0;
}
#heart>.right{
position: absolute;
bottom:50px;
right:-50px;
transform:rotate(45deg) translateY(30px);
border-radius:50% 50% 0 0;
}
#heart>.bottom{
transform:rotate(45deg);
}
