《CSS 知识总结》

一、浏览器渲染原理

1. 根据HTML构建HTML树(DOM)

2. 根据CSS构建CSS树(CSSOM)

3. 将两棵树合并成一颗渲染树(render tree)

4. layout布局(文档流、盒模型、计算大小和位置)

5. paint绘制(把边框颜色、文字颜色、阴影等画出来)

6. compose合成(根据层叠关系展示画面)

更新样式的三种方法：

1.所有途径走一次。 JS/CSS>样式>布局>绘制>合成（div.remove()触发当前消失，其他元素relayout）

JavaScript > Style > Layout > Paint > Composite

2. 跳过layout。JS/CSS>样式>绘制>合成（改变背景颜色直接repaint+composite）

JavaScript > Style > Paint > Composite

3. 跳过layout和paint。JS/CSS>样式>合成（改变transform，只需要composite）

JavaScript > Style > Composite

二、CSS 动画的两种做法

（1）transition 过渡

作用：补充中间帧

语法：

1. transition: 属性名 | 时长 | 过渡方式 | 延迟

transition: left 200ms linear

2. 可以用逗号分隔两个不同属性

transition: left 200ms , top 400ms

3. 可以用all代表所有的属性

transition:all 200ms

过渡方式：

常用的有：

linear 线性：动画会以恒定的速度从初始状态过渡到结束状态

ease 缓动：动画开始时逐步加速，中间逐渐减慢，结束时逐步加速

ease-in-out 淡入淡出：动画开始时缓慢，中间逐步加速，结束时逐渐减慢

延迟：延迟多久时间后执行动画

不是所有属性都能进行Transition（过渡）

display:none ==> block 没法过渡

一般改成visibility:hidden ==> visibile

（2）animation 动画

用法: 声明关键帧，添加动画

声明关键帧>语法: @keyframes 动画名{ }

标准写法:

1. from/to

@keyframes 动画名 {

from {

transform: translateX(0%);

}

to {

transform: translateX(100%);

}

}

2. 百分数推荐

@keyframes 动画名 {

0% { top: 0; left: 0; }

30% { top: 50px; }

68%, 72% { left: 50px; }

100% { top: 100px; left: 100%; }

}

添加动画:语法：

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

动画名（animation-name）：指定执行某个动画

时长（animation-duration）：s 或者 ms

过渡方式（animation-timing-function）：与transition取值是一样的

延迟（animation-delay）：延迟多久时间后执行动画

次数（animation-iteration-count）：数字（3或者2.4）或者 infinite（无限循环）

方向（animation-direction）：normal 默认正常 / reverse 相反方向

alternate 默认正常方向循环（需要配合次数）：alternate-reverse 默认相反方向循环（需要配合次数）

填充模式（animation-fill-mode）：none 默认

是否暂停（animation-play-state）：running 恢复运行动画 / paused 暂停动画

如何让动画停在最后一帧：

1. backwards （需配合延迟属性）立即应用第一个关键帧的样式，延迟结束后，执行动画

2. both (forwards+backwards相结合需配合延迟属性）立即应用第一个关键帧的样式，延迟结束后，执行动画，动画结束后保持最后一帧

最后编辑于：2021.02.25 23:38:14