《CSS 知识总结》

一、浏览器渲染

　　过程：1.根据HTML构建HTML树

　　 2.根据CSS构建CSS树

　　　　　3.将两棵树合成一棵渲染树

　　　　　4.layout布局

　　　　　5.paint绘制

　　　　　6.compose合成

　　更新方式（重新渲染）：

　　　　　1.JS/CSS-->样式-->layout-->paint-->composite

　　　　　2.JS/CSS-->样式-->paint-->composite

　　　　　3.JS/CSS-->样式-->composite

二、CSS 动画的两种做法

　　1.transform

　　　　常用功能：translate(位移)、rotate(旋转)、scale(缩放)、skew(倾斜)

　　　　过渡：transition:属性名 | 时长 | 过渡方式 | 延迟;

　　　　过渡方式： linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | stop-end | steps

　　2.animation

　　　　语法：animation:时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;

过渡方式与transform一样；

填充模式：none | forwards | backwards | both；

方向：reverse | alternate | alternate-reverse

是否暂停：paused | running

@keyframes语法：

一、

 @keyframes name{
from{
......
}
to{
........
}
}

 

二、

 @keyframes name{
0%{...}
30%{...}
68%，72%{...}
100%{...}
}