动画的定义
- 由许多静止的画面（帧）以一定的速度连续播放时，以肉眼因视线残像产生错觉，而误以为是活动的画面；
- 帧 ： 每个静止的画面都叫做帧；播放速度： 每秒24帧（电影）或者每秒30帧（游戏）；
浏览器渲染原理
- 根据HTML构建HTML树（DOM）；
- 根据CSS构建CSS树（CSSOM）；
- 将两棵树合并成一颗渲染树（render tree）；
- Paint绘制（把边框颜色、文字颜色、阴影画出来）；
- Compose合成（根据层叠关系展示画面）
CSS 动画的两种做法（transition 和 animation）
-
transform
- translate 位移
- scale 缩放
- rotate 旋转
- skew 倾斜
注：四个属性一般都需要配合transition 过渡
inline元素不支持transform，需要先变成block；
属性详解：
-
translate ;
transform: translateX(<length - percentage); transform: translateY(<length - percentage); transform: translate(<length - percentage); [XY简写]； transform: translate(10px | 10%);/* Equal to: translateX(10px) or translate(10px, 0) */
⭐注意：transform: translate( -50%, -50%)可做绝对定位元素的居中（搭配margin使用）；
-
scale ；（用的少，易出现模糊）；
transform: scaleX( <number> ); transform: scaleY( <number> ); transform: scale( <number>,<number> );[XY简写]； transform: scale(2，0.5); -
rotate ;
transform: rotate( 90deg ); [旋转90°] transform: rotateZ( 90 deg ); [等同于上] transform: rotateX( 90 deg );[X轴旋转90°] transform: rotateY( 90 deg );[Y轴旋转90°] transform: rotate3d( ); 太复杂，详情查询 rotate mdn ;
rotate ;(一般用于360°旋转制作loading(等待))；
-
skew ;
transform: skew( 90deg,90deg );[XY同时旋转 90°]用的较少，可查询 skew mdn ;
-
transform 多重组合效果：
示例： transform: translate(10px,10px) scale(2);
-
transition 过渡 ：
作用：补充中间帧 ；
语法：
- transition： 属性名 时长 过渡方式 延迟
transition： left 200ms liner
- 可以用逗号 分割两个属性
transition： left 200ms , top 400ms
- 可以用 all 代表所有属性
transition： all 200ms
- 过渡方式：liner | ease | ease-in | ease-out | ease-in-out | cubic-bezier | ...... 具体查 transition mdn
注意 ：
-
animation
缩写语法
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
时长 ： 1s 或者 1000ms
过渡方式 ： 和trasition 取值一样，如 linear
次数 ： 3 或者 2.4 或者 infinite
方向 ： reverse | alternate | alternate-reverse
填充模式 ： none | forwards | backwards | both
是否暂停 ： paused | running
以上属性都有对应的单独属性
@keyframes 完整语法
from to 写法：
百分数写法：
