个人觉得，这部分饥人谷的课程讲的不是很全面，可能是老师的习惯，对于小白来说，这节课程真正重要的两种过渡的属性都没有介绍，只是给了个简写，给了个查找路径，了解更多，自己去查

浏览器的渲染过程

1. 根据HTML生成HTML树（DOM）
   
2. 根据CSS生成CSS树（CSSOM）
   
3. 将两棵树合并成一颗渲染树（render tree）
   
4. Layout布局（文档流，盒模型，计算大小和布局）
   
5. point绘制（把边框颜色，文字颜色，阴影画出来）
   
6. composite 合成（根据层叠关系展示画面）
   ### 三种树模型
   DOM CSSOM RenderTree
   

简单带一下JS，如何用JS来更新模式
例
div.style.background = "red"设置属性
div.style.display="block"设置属性
div.classList.add("red");添加节点
div.remove()直接删除节点

CSS 性能优化

css性能优化

把left改成transform
使用will-change或translate

JS优化

使用requestAnimationFrame代替setTimeOut

transform全解

transform中的几个属性
translate： 移动
rotate：旋转
scale：放大/缩小
skew：倾斜
如果用transform缩写：属性间用空格隔开

transition过渡

作用：补充中间帧
* transition-property：添加过渡效果的样式属性名称
transition：left
* transition-duration：过渡效果的耗时
transition：2s
* transition-timing-function：设置时间函数，控制运动速度
transition-timing-function ：linear
* transition-delay：过渡效果的延时
transition-delay：2s
上述属性简写：transition:属性名称 过渡时间 时间函数 延迟
属性间用空格隔开
同时添加多个样式时，用逗号隔开
为所有样式添加过渡效果
transition：all 2s

animation过渡

创建动画
HTML
@keyframes xxx{
0%{
transform:translate(0,0);
}
50%{
transform:translate(200px,0);
}
100%{
transform:translate(200px,200px);
}
}

也可以用from表示0% 用to表示100%

animation的属性和transition差不多
* animation-duration：2s；
* animation-iteration-count:设置动画循环播放次数
* animation-direction：alternate来回播放
* animation-delay：2s；
* animation-fill-mode:设置动画结束时的状态
forwards保留动画结束时的状态，在有延迟时不会立即进入动画的初始状态
backwards：不会保留动画结束时的状态，再添加了动画延迟的前提下，如果动画有初始状态，先进入初始状态
both：保留动画结束状态，有延迟立即进入初始状态
* animation-timing-function:动画的时间函数
* animation-play-state：paused/running设置动画的播放状态
* animation的缩写：
animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
顺序可以任意改变

用transform写的跳动的红心（jsbin）

http://js.jirengu.com/jisab/1/edit?html,css,output

用transition写的跳动的红心（jsbin）

http://js.jirengu.com/yelas/1/edit?html,css,output

用animation写的跳动的心（jsbin）

http://js.jirengu.com/feriv/1/edit?html,css,output