浏览器的渲染机制
- 解析HTML字符串构建DOM树
- 解析CSS样式，产生CSSOM树
- 执行js脚本文件，js加载完成，通过DOM API 和 CSSOM API 来操作DOM树和CSSOM树
- 浏览器根据DOM树和CSSOM树构建渲染树（rendering tree），渲染树包括显示的节点和节点显示的样式信息，如果某个节点设置了样式
display: none，那么就不会在渲染树中显示，如果设置visibility:hidden渲染树中存在该节点，但不显示。 - 根据渲染树对每一个节点在页面上进行布局（文档流、盒模型、计算元素的大小和位置）。（reflow）
- 遍历渲染树，为每一个节点绘制（paint）对应的样式，比如边框的颜色、文字的颜色、阴影等（repaint）
7.根据层叠关系显示到屏幕。
reflow和repaint
在第5步和第6步中，各个节点自身的盒模型，浏览器根据样式计算该节点元素该放置的位置，这个过程为reflow；当各个节点元素的位置、大小以及其他属性，例如颜色、字体大小等确定之后，浏览器将各个元素根据这些特性绘制页面，这个过程叫repaint。
CSS动画 （transition 和 animation）
transition 只能执行一次(必须有起始状态，比如从hover 到非hover)
animation 可多个状态 循环重复多次执行
transition: 属性名 时长 过渡方式 延迟
- property 属性名：all（所有属性） | css中属性（width、color等）
- duration 时长：指定过渡时长
- 过渡方式 timing-function:linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier | step-start | step-end | steps
- 延迟delay：动画开始之前暂停的时间
并不是所有属性都能过渡！
display:none =>display:block;无法过渡，一般改成visibility:hidden =>visible
animation: name duration timing-function delay iteration-count direction fill-mode; - 动画名name:
- 时长duration :1s或者1000ms
- 过渡方式 timing-function:linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier | step-start | step-end | steps
- 是否延迟delay:0s默认不延迟 | 其他数值时间
- 次数 iteration-count: infinite | 数字
- 方向direction :normal | alternate | reverse | alternate-reverse
- 填充模式fill-mode: none | forwards | backwards | both
