总结一下最近学习的CSS知识。
一、浏览器渲染原理
简单聊一下浏览器的渲染原理，大部分知识来自google团队的文章。
1、根据HTML构建HTML树（DOM）
2、根据CSS构建CSS树（CSSDOM）
3、将两棵树合并成一棵渲染树（rendertree)
4、Layout布局（文档流、盒模型、计算大小和位置）
5、Paint绘制（把边框颜色、文字颜色、阴影等画出来）
6、Compose合成（根据层叠关系展示画面）
对于网页中的样式更新，一般来讲有三种方式：
第一种方式会触发当前消失，其他元素relayout；第二种会跳过layout过程，第三种可以跳过layout和paint过程；
三种方式都可以达到更新样式的效果，第三种的性能最优。
那么哪个属性会进行上面三种过程中的哪一种呢？除了自己实验还可以参考这个网站：csstriggers.com/
CSS 动画的两种做法（transition 和 animation）
1、transition
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。作用就是补充帧数。
基本语法：
transition：属性名 时长 过渡方式 延迟
transition：left 20ms linear
1、可以用逗号分隔不同的属性
tansition：left 200ms , top 400ms
2、可以用all代替所有属性
transition：all 200ms
3、过渡效果有：
linear（匀速的）| ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps，具体的实现效果需要依靠数学公式理解：developer.mozilla.org/zh-CN/docs/…
4、并不是所有属性都可以过渡
display:none =>block 无法过渡，一般改为visibility：hidden=>visible
背景颜色、opacity透明度是可以过渡的。
2、 animation
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发 动画可以自动触发动态效果。
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤。
属性缩写语法：
animation：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
1 时长：1s 或 10ms
2 过渡方式： 于transition取值相同，如linear
3 次数 3 或者2.4 或者 infinite
4 方向：reverse（反方向） | alternate（交替方向） | alternate-reverse（反向交替)
5 填充模式：none | forwards backwards | both
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards 和 backwards
6 是否暂停： paused | running
以上属性都有对应的单独属性
2、标准写法
两种，一种是from to，另一种是用百分比的写法
CSS不难，但是要记得东西比较多，需要多加练习，加油！
——部分文字来自MDN 饥人谷
