- 浏览器渲染原理
- css动画的两种做法
- @keyframes完整语法
▲浏览器渲染原理
步骤过程如下：
- 根据HTML构建HTML树（DOM）;
- 根据CSS构建CSS树（CSSOM）;
- 将以上两棵“树”合并成一颗渲染树（render tree）；
- Layout布局（文档流、盒模型、计算大小和位置）；
- Paint绘制（把边框颜色、文字颜色、阴影等绘制出来）；
- Compose合成（根据层叠关系展示画面）；
▲CSS动画的两种做法
♦ transition(过渡)
- 作用： 补充中间帧。
- 语法：
- transition:属性名 时长 过渡方式 延迟 ；
transition: xxx left 200ms linear;
- 可以用逗号分隔两个不同的属性；
transition： left 200ms , top 400ms;
- 可以用all代表所有属性；
transition: all 200ms;
-
过渡的方式（常用）：
- linear： 匀速；
- ease： 缓动；
- ease-in： 淡入；
- ease-out： 淡出；
- ease-in-out： 淡入淡出；
- 注意：并不是所有属性都能过渡，例如：display：block → none ;一般改成 visibility：hidden → visible；
- background可以过渡。
♦ animation
-
语法： animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名 ；
-
时长： 1s 或者 100ms；
-
过渡方式：取值与transition相同；
-
次数： 1/2/3……或者infinite（无限次）；
-
填充模式： none/ fordward / backwards / both ；
-
是否暂停： paused / running ；
-
▲补充：（@keyframes完整语法)
作用： 添加关键帧 。@keyframes通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。和transition相比，关键帧 keyframes可以控制动画序列的中间步骤。
两种书写方式：
- from to
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
- 百分数
@keyframes slidein {
0% {top:0;left:0;}
30% {top:0;left:0;}
60%,82% {top:0;left:0;}
100% {top:0;left:0;}
}
