animation-steps

通过引用内置的帧动画函数实现帧动画效果

• 诸如指定图片序列顺序播放实现类似 GIF动画效果
• 任意指定图片组合实现诸如 霓虹灯不稳定闪烁 等动画效果

用法实例见 demo

帧动画基本知识

step-end / steps(1) / steps(1, end) 无论播放多少次，动画过程中的 每一轮动画的 最后一帧(100%)都是被pass的

	if (如果非无限循环动画 && fill-mode: forwards) {
		direction: alternate && iteration-count: 偶数 ?
   	停留在0% :
		停留在被pass的100% ;
   }

step-end 如要保证一轮素材中每一张都播放到，最后一张图除了需要是100%，也需要同时是倒数第二帧，这样无论如何, 都符合预期

---

step-start / steps(1, start) 无论播放多少次，动画过程中的 每一轮动画的 第一帧(0%)都是被pass的

	if (如果非无限循环动画 && fill-mode: forwards) {
		direction: alternate && iteration-count: 偶数 ?
   	停留在0% 之后的那一帧 :
		停留在100% ;
   }

step-start 0% 无论如何都不会执行，所以空余0%，用给出的素材得出 n%（n > 0） , ... , 100% 即可。

总结：逻辑上讲，如果为了保证每一帧都执行到，用 start 更通顺，但 steps 默认是 end，使用者自行决定用哪种实现吧