steps 精灵帧动画 | 星雨笔录

使用 steps 制作逐帧动画。

核心: steps(n) 让动画分为离散帧,适合雪碧图逐帧移动。

最小示例:

.sprite { animation: walk 1s steps(4) infinite; }
@keyframes walk { to { background-position: -256px 0; } }

学完能做: 使用 steps 制作逐帧动画。