CSS实现油漆罐逐帧动画异常求助：首图放大重复致动画失效

嘿，我帮你梳理了这类逐帧动画失效问题的常见诱因，你遇到的第一张图放大重复、动画效果丢失的情况，大概率是这几个CSS设置错误导致的：

1. 背景图尺寸（background-size）未正确配置 #

如果你的动画是用**雪碧图（把7张序列图拼在一张大图里）**实现的，没设置对应比例的background-size会让浏览器默认拉伸单帧图填满容器，直接导致第一张图被放大重复，后续帧的位置偏移完全失效。
举个例子：如果你的雪碧图总宽度是单帧图的7倍，就必须明确设置：

background-size: 700% 100%; /* 7帧对应横向700%的宽度比例 */

2. 关键帧的位置偏移计算错误 #

7帧动画的关键帧偏移量需要精准对应——从第1帧到第7帧，只需要偏移6次（因为初始位置就是第1帧）。如果你的关键帧写成了100% { background-position: -700% 0; }，就会超出雪碧图的范围，浏览器会重复显示第一张图来填补空白。
正确的关键帧应该是：

@keyframes pourPaint {
  0% { background-position: 0 0; }
  100% { background-position: -600% 0; } /* 7帧对应6次偏移，总比例-600% */
}

3. 动画时间函数的steps参数不匹配 #

逐帧动画的核心是用steps()实现离散的帧切换，这里的参数必须和你的帧数一致（也就是7）。如果写成steps(1)或者其他数字，动画就会停留在第一张图，完全没有切换效果：

animation-timing-function: steps(7);

4. 容器尺寸与单帧图尺寸不匹配 #

如果你的油漆罐容器宽高和单张序列图的宽高不一致，浏览器会自动拉伸背景图，导致第一张图被放大变形，后续帧也无法对齐显示。一定要确保容器的width和height严格等于单帧图的尺寸。

另外补充一句：如果你是尝试直接切换多张独立图片的background-image来做动画，这种方式在CSS里兼容性很差，而且容易出现帧丢失的问题，更推荐用雪碧图的方式实现逐帧动画。

内容的提问来源于stack exchange，提问作者user8873301