CSS 动画笔记

浏览器渲染过程

1. 根据 HTML 构建 HTML 树（HTMO DOM）
2. 根据 CSS 构建 CSS 树（CSSOM）
3. 将 HTML 树和 CSS 树，合成为一棵渲染树（Render Tree）
4. 渲染页面
   1. Layout 布局（文档流、盒模型、计算大小和位置）
   2. Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
   3. Compose 合成（根据层叠关系展示画面）

制作 CSS 动画的方法

动画的基本概念

• 动画是多张图片在眼前闪过，产生的视觉残像组成的一串连续画面，图片越多，闪动约快，画面中的动作看起来更流畅
• 帧 —> 每个静止的画面被称作帧
• 播放速度（FPS） —> 每秒 24 帧（影视最低）或者每秒 30 帧（游戏最低）

transform 变换属性

transform 中有很多可以改变 CSS 样式的函数

• translate | translateX | translateY : 偏移属性
• scale : 放大缩小，图片会失真，少用
• rotate : 旋转
• skew : 倾斜

transtion 过渡属性

为一个元素在不同状态之间切换的时候定义不同的过渡效果

animation 动画

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。配合 @keyframes 时使用

• animation-name : 动画规则名
• animation-duration : 单个动画的持续时间
• animation-timing-function ： 动画曲线
• animation-delay : 设置一段时间后执行动画
• animation-iteration-count : 设置是否重复
• animation-direction ： 动画方向
• animation-fill-mode : 设置CSS动画在执行之前和之后如何将样式应用于其目标
• animation-play-state ： 播放状态

@keyframes 动画规则

栗子

div{ 
	background: red;
	animation: changeColor 2s linear;
}
@keyframes changeColor {
	0% { background: red }
	100% { background: blue }
}