浏览器渲染原理
浏览器渲染一共分为6个步骤
- 首先根据HTML构建一个HTML树；
- 根据css构建css树；
- 将两棵树合并成一颗渲染树；
- Layout布局（文档流，盒模型，计算大小和位置）
- Paint绘制（边框颜色，文字颜色，阴影等画出来）
- 合成(根据层叠关系展示画面)
CSS 动画的两种做法
使用transform搭配transition来制作动画
- transform一共有4个常用功能
- 位移translate；
- 缩放scale；
- 旋转rotate；
- 倾斜skew；
-
一般需要配合transition过渡 inline元素不支持transform 需要先变成block；
-
transition语法
- transition： 属性名 时长 过渡方式 延迟
- 比如transition:left 200ms linear;
- 可以用逗号分隔两个不同的属性；
- 可以用all代表所有属性；
- 过渡方式有常用的有linear，ease，ease-in ，ease-out，ease-in-out；
4.注意：不是所有属性都可以过渡
- display:none => block无法过渡；一般改成visibility:hidden => visible;
animation动画
- 添加关键帧
@keyframes xxx{
0%{
transform:scale(1.0);
}
100%{
transform:scale(1.5);
}
}
复制代码- 添加动画 animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名；
- 时长：1s或者1000ms；
- 过渡方式：和transition取值一样；
- 次数： 3或者 2.4 或者无限次 infinite；
- 方向： reverse | alternate | alternate-reverse;
- 填充模式： none | forwards | backwards | both
- 是否暂停： paused | running
- 注意：以上所有属性都有对应的单独属性；
