浏览器渲染原理
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout布局(文档流，盒模型，计算大小和位置)
- Paint绘制（把边框颜色，文字颜色，阴影等画出来）
-
Compose合成（根据层叠关系展示画面）
渲染.jpg
不同的属性，渲染流程不同
- 全走一遍
div.remove() 会触发当前消失，其他元素重新布局，再绘制合成 - 跳过layout
改变背景颜色，不需要再布局，直接绘制合成 -
跳过layout、paint
改变transform，只需重新合成
三种更新方式.jpg
CSS 动画的两种做法（transition 和 animation）
动画原理
- 定义
由许多静止的画面（帧），以一定的速度（如每秒30张）连续播放时，肉眼因视觉残像产生错觉，而误以为是活动的画面。 - 概念
帧：每个静止的画面都叫做帧
播放速度：每秒24帧（影视）或者每秒30帧（游戏）
transform
- 四个常用功能
- translate 位移
translateX(50%)，translateY(50%)，translate(50%,50%)，translateZ(50%)且父容器perspective，translate3d(x,y,z) - scale 缩放
scaleX(0.5)，scaleY(0.5)，scale(0.5, 0.5) - rotate 旋转，一般用于360度旋转制作loading。
- skew 倾斜
2.经验
- 一般都需要配合
transition过渡 -
inline元素不支持transform，需要先变成block - 组合使用
transform: scale(0.5) translate(-100%,-100%) -
transform:none;取消所有 -
translate(50%,50%)可做绝对定位元素的居中 -
scale容易出现模糊
transition 过渡
- 作用
补充中间帧 - 语法
- transition:属性名 时长 过渡方式 延迟（
transitio:left 1s linear） - 可以用逗号分隔两个不同属性（
transition:left 1s，top 2s） - 可以用all代表所有属性（
transition:all 1s） - 过渡方式有：
linear/ease（默认的）/ease-in/ease-out/ease-in-out…… - 注意：并不是所有属性都能过渡
display:none =>block无法过渡，一般改成visibility:hidden =>visible
background无法过渡，opacity透明度无法过渡 - 过渡必须要有起始，一般只有一次动画或者两次
- 除了起始，还有中间点，怎么办？
- 使用两次transform
.a === transform ===>.b
.b === transform ===>.c
用setTimeout或者监听transitionend事件知道到中间点了 - 使用animation，声明关键帧，添加动画
animation 动画
- 当有中间点时可以使用animation，需声明关键帧@keyframes，添加动画
@keyframes两种写法
一种是from to
@keyframes slidein{
from{
transform: translateX(0%);
}
to{
transform: translateX(100%);
}
}
一种是百分数
@keyframes identifier{
0%{top: 0; left: 0;}
30%{top: 50px;}
68%, 72%{left: 50px;}
100%{top: 100px; left: 100%;}
}
- 语法
animation: .5s heart infinite alternate-reverse;
- animation：时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
- 时长：1s或1000ms
- 过渡方式：跟transition取值一样
- 次数：3或2.4或infinite（无穷尽）
- 方向：reverse（相反）/alternate（轮流）/alternate-reverse（交替反转）
- 填充模式：none/forwards/backwards/both
- 是否暂停：paused/running
3.提问：如何让动画停留在最后一帧
- 搜索css animation stop at end
- 在animation后加一个forwards
