css3帧动画-animation的steps()用法详解

steps() 是 animation-timing-function 的属性值

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

• steps 函数指定了一个阶跃函数，它接受两个参数
• 第一个参数接受一个整数值，表示两个关键帧之间分几步完成
• 第二个参数有两个值 start or end。默认值为 end
• step-start 等同于 step(1, start)。step-end 等同于 step(1, end)

steps 适用于关键帧动画，第一个参数将两个关键帧细分为N帧，第二个参数决定从一帧到另一帧的中间间隔是用开始帧还是结束帧来进行填充。

看下图可以发现:

• steps(N, start)将动画分为N段，动画在每一段的起点发生阶跃(即图中的空心圆 → 实心圆),动画结束时停留在了第 N 帧
• steps(N, end)将动画分为N段，动画在每一段的终点发生阶跃(即图中的空心圆 → 实心圆),动画结束时第 N 帧已经被跳过(即图中的空心圆 → 实心圆)，停留在了 N+1 帧。