河码 - 饥人谷

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

浏览器的渲染过程

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

简单带一下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过渡

创建动画

@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

CSS动画