CSS动画入门

基础浏览器渲染原理

渲染步骤

◎ 浏览器渲染原理

关于具体的浏览器渲染流程，可参考此文章
更新样式

开发中，一般通过JS来更新样式

例如：
1 2 3 4

div.style.background = 'red' div.style.display = 'none' div.classList.add('red') div.remove()
执行代码后，有三种更新方式
1. 样式更新后，需要重新进行布局，并重新进行绘制及合成 例如div.remove()，移除div后，整体布局需要re layout，继而发起后续步骤。 2. 样式更新后，无需重新进行布局，但需要重新绘制及合成 例如div.style.background = 'red' ，仅修改了颜色，只触发重绘制及后续步骤。
3. 样式更新后，仅进行合成 例如改变transform属性，仅需要重合成。

CSS动画实现方式

transition

作用

过渡，（当存在初始状态与最终状态时）补充中间帧

语法

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


/* 属性名 | 时长 */
transition: margin-right 4s;

/* 属性名 | 时长 | 延迟 */
transition: margin-right 4s 1s;

/* 属性名 | 时长 | 过渡方式 */
transition: margin-right 4s ease-in-out;

/* 属性名 | 时长 | 过渡方式 | 延迟 */
transition: margin-right 4s ease-in-out 1s;

/* 可以用逗号,分割两个不同的属性 */
transition: margin-right 4s, color 1s;

/* 可以用all代替所有属性 */
transition: all 0.5s ease-out;

/* 全局属性 */
transition: inherit;
transition: initial;
transition: unset;

详细标准语法规则与示例可前往MDN搜索关键词transition查看✌️

注意事项⚠️

并不是所有的属性都能使用transition过渡
1. 初始➡️最终状态包含以下两种属性，无法使用transition进行过渡
  - display: none ↔️ display: block
  - 如果想发生元素从隐藏↔️可视的转变，一般改成visibility: hidden ↔️ visibility: visible
2. background属性可以使用transition过渡
3. opacity属性可以使用transition过度

animation

作用

animation可以将一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。[1]

语法

样式规则

animation属性或其子属性允许配置动画时间、时长以及其他动画细节，但该属性实际上不能配置动画的实际表现。

1
2
3
4
5
6
7
8


/* 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充方式 | 是否暂停 | （@keyframes描述的关键帧）名称 */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* 时长 | 过渡方式 | 延迟 | （@keyframes描述的关键帧）名称 */
animation: 3s linear 1s slidein;

/* 时长 | （@keyframes描述的关键帧）名称 */
animation: 3s slidein;

详细标准语法规则与示例可前往MDN搜索关键词animation查看✌️

关键帧

@keyframes通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。一般来说有两种表达方式：

from to

1
2
3
4
5
6
7
8
9


@keyframes name {
   from {
       transform: translateX(0%); 
   }

   to {
       transform: translateX(100%);
   }
}

该写法下，只有两个关键帧（from ... to ... ）。

百分数关键帧表达

1
2
3
4
5
6


@keyframes identifier {
   0% { top: 0; left: 0; }
   30% { top: 50px; }
   68%, 72% { left: 50px; }
   100% { top: 100px; left: 100%; }
}

如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。

其他

若不使用animation动画，当CSS动画有中间状态时，也可以使用多次transform解决问题。（但是一般推荐使用更为灵活强大的animation功能）

CSS动画入门

基础浏览器渲染原理

渲染步骤

更新样式

CSS动画实现方式

transition

animation