《CSS 知识总结》

浏览器对内容的渲染，这一部分（渲染树构建、布局及绘制），又可以分为下面5个步骤：

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上。

transition的用法：

1. transition就是过渡的意思，就是 告诉你开头是什么样的，中间是什么样的，结束的时候是什么样的.
2. 作用：补充中间帧，给你开始结尾补充中间的画面变化是怎么样的。
3. 语法：
   transition：属性名 时长 过渡方式 延迟

transition:width 1s linear 3s

也可以用逗号来隔开两个不同的属性：可以用all代表所有属性

transition: all 2s

过渡方式有：linear | ease（非线性） | rase-in | raes-out | ease-in-out |

注意：

并不是所有属性都能过渡

display:none=>block无法过度，一般改成xisibilit：hidden=>visible

opaciti:0;（透明度）让动画看不见，但位置还占着，容易bug.要等动画结束的时候关掉。
background是可以过度的

animation

#demo.start{
animation: xxx 1.5s
}

@keyframes xxx{
0%{transform:translate x(200px);}
66.66%{transform:translate x(200px);tranform:translate(100px);}
}

如何让动画停在最后一帧？直接在后面加一个forwards

animation： xxx 1.5s forwards;

@animation还有另一种用法：

#demo.start{
animation: xxx 1.5s forwards
}

@keyframes: xxx {
from {transform:translate(200px);}
to {transformLtranslate(100px);}
}

xxx是一个名字，当声明@keyframes xxx时，需要把XXX放在animation里面