逐帧动画steps函数用法

1. steps基本用法

animation-timing-function: steps(number, [end | start])

steps(number, [end | start]) 是将动画分为number段，共有number + 1帧画面。

注意，steps(n)函数中的n，并不是keyframe的个数，而是keyframe个数减1，keyframe相当于状态点，n相当于中间态的个数

start就是抛弃第一帧画面执行动画，end就是抛弃最后一帧画面执行动画。

steps的number参数并不是将整个动画过程切割成number段，而是对于某个css样式来说，每一段关键帧的变化切割成number段。

即使将几个关键帧的css变化设置的具有规律性，但是steps仍然会将每段关键帧的变化切割成number段，即只要在这个关键帧里设置了某个css，那么对于这个css来说，这个关键帧就会被视为steps动画的端点。

2. step-start 和 step-end基本用法

step-start = steps(n-1, start)，表示跳过第一帧，直接开始动画，直接开始

step-end = steps(n-1, end)或者steps(n-1)，表示从初始态开始动画，放弃最后一帧，直接终止

注意，通常直接写 steps(n) 实际上就是 steps(n, end)，默认是跳过最后一帧，注意甄别

3. steps第二个参数

从 Chrome 77+开始，steps支持了几个以jumb-开头的关键词，分别是

jump-start，等同于之前的start，表示跳过第一帧
jump-end， 等同于之前的end，表示跳过最后一帧
jump-both，表示跳过第一帧和最后一帧，
jump-none，表示都不跳过 steps(3, jump-none)，表示执行3帧，而不是4帧

使用关键字时候，steps的number要改变，比如 steps(n)

使用了jump-both，现在只能写成steps(n-2, jump-both), 要减去跳过的两帧

使用了jump-start，现在只能写成steps(n-1, jump-start), 要减去跳过的一帧

使用了jump-end，现在只能写成steps(n-1, jump-end), 要减去跳过的一帧

使用了jump-none，现在只能写成steps(n-0, jump-none), 减去0，相当于不减，直接写成steps(n, jump-none)