前置知识
animateion 和 transition 的 timing-function 有 2 种
cubic-bezier(贝塞尔曲线)
- ease 变快在变慢。 其实和esae-in-out差不多
- linear 表示属性值按照一个固定的速度线性的变化
- ease-in 表示属性值先以较慢速度变化，然后速度越来越快，就好比一个球从高处落下.in 进来就是快
- ease-out 先快后慢，好比东西往上扔（向上的过程）。out 出去就是慢
- esae-in-out 先慢后快，然后在慢 篮球掉到地上又弹起来。
steps
贝塞尔曲线的动画都是丝滑的，steps 则不是，他好比楼梯，贝塞尔曲线好比爬坡。 steps 函数指定了一个阶跃函数，提供了瞬间移动的能力。它接受两个参数
- 第一个参数接受一个整数值，表示两个关键帧之间分几步完成
- 第二个参数有两个值 start or end。默认值为 end。
预设值有
- step-start 等同于 step(1, start)。
- step-end 等同于 step(1, end）
steps(N, start)将动画分为N段，动画在每一段的起点发生阶跃(即图中的空心圆 → 实心圆),动画结束时停留在了第 N 帧
steps(N, end)将动画分为N段，动画在每一段的终点发生阶跃(即图中的空心圆 → 实心圆),动画结束时第 N 帧已经被跳过(即图中的空心圆 → 实心圆)，停留在了 N+1 帧。