CSS动画的分类
- transition补间，过度动画：控制最开始的状态和最末的状态的动画，中间的状态由浏览器自动帮我们计算生成
- keyframe关键帧动画
- 逐帧动画
transition补间动画
- transition-property：规定设置过渡效果的 CSS 属性的名称。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
- transition-duration：指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。
- transition-timing-function：规定速度效果的速度曲线。
- transition-delay：指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
补间动画场景
- 位置-平移（left，right，margin，transform）
- 方位-旋转（transform: rotate）
- 大小-缩放（transform: scale）
- 透明度（opacity）
- 其他-线性变换（transform）
补间动画过度动画
ceaser：过度动画
keyframe关键帧动画
@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比 transition 更能控制动画序列的中间步骤。
要使用关键帧, 先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 这个属性来将一个动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。
- animation：属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
- animation-name：属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
- animation-direction: 指示动画是否反向播放，它通常在简写属性animation中设定
- animation-fill-mode：设置CSS动画在执行之前和之后如何将样式应用于其目标。决定动画停在哪里。
- animation-iteration-count: 定义动画在结束前运行的次数 可以是1次 无限循环。
- animation-play-state：定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
逐帧动画
- 每一帧都是关键帧，没有补间，过度
- 适用于无法补间计算的动画
- 资源较大，需要大量图片
- 使用 animation-timing-function: steps(1)，1保证每个区间只有一个画面，取消补间，过度效果。
过度动画与关键帧动画的区别
- 过度动画需要有状态改变
- 关键帧动画不需要状态改变
- 关键帧动画能控制更精细
逐帧动画如何实现
- 使用关键帧动画
- 消除补间，过度（steps）
CSS动画性能
- 性能不差
- 部分情况下优于js
- js可以做到更好，可以优化
- 部分高危属性，如：box-shadow等