CSS 入门笔记4: 动画

浏览器渲染过程

• 构建 HTML 树（DOM）
• 构建 CSS 树（CSSOM）
• 两个树合并成渲染树（render tree）
• Layout 布局（文档流，盒模型，计算大小和位置）
• Paint 绘制（边框颜色，阴影）
• Compose 合成（根据层叠关系展示画面）

更新样式的三种方法

1. JS / CSS > 样式 > 布局 > 绘制 > 合成
2. JS / CSS > 样式 > 绘制 > 合成
3. JS / CSS > 样式 > 合成

• 第一种：全部重新走一遍，如：div.remove() 删除节点
• 第二种：跳过layout，直接 repaint 和 recompose，如：div.style.background = 'red' 改变背景颜色
• 第三种：跳过layout，paint，直接compose，如：transform

详见：csstriggers.com

CSS动画优化

• JS 优化：使用 requestAnimationFrame 代替 setTimeout 或 setInterval
• CSS 优化：使用 will-change 或 translate

transform

用法：

• translate 位移
• scale 缩放
• rotate 旋转
• skew 倾斜

详见MDN

经验：

• 一般需要 transition 过渡
• inline 元素不支持transform，需要先变成 block 元素
• translate(-50%, -50%)可做绝对定位元素的居中

div {
    left:50%; 
    top:50%;
    translate(-50%, -50%);
    }

transition

作用：过渡，补充中间帧

用法： transition：属性 时长 过渡方式 延迟

详见MDN

注意：

• 不是所有属性都能transition，如：display: none ==> display: block, 一般使用visibility: hidden ==> visibility: visible
• transition 必须要有起始

animation

作用：添加多个关键帧

添加 forwards 使动画停在最后一帧