CSS background逐帧动画多浏览器兼容异常问题咨询

• 重复ID导致样式匹配异常：HTML规范要求ID全局唯一，你的代码中存在两个id="tlo"的div元素，火狐对这类错误的容错性更高，而Chromium内核的Edge、Opera等浏览器会出现样式匹配错误，导致动画位移计算异常。需要将两个div修改为不同ID，再分别对应编写样式规则。
• 背景图与位置数量不匹配：你的代码中background-image仅定义了25张背景图，但background-position定义了29个位置值，多余的4个位置没有对应背景图会显示空白，不同浏览器对这类不匹配的处理逻辑不同，也会导致末尾出现跳帧、空白停顿的问题。需要补充缺失的4张背景图，或者删除多余的4个位置值，保证两者数量一致。
• steps动画参数默认值差异：你使用的steps(28)默认采用jump-end模式，该模式下动画最后一帧会直接跳转到结束状态，不会停留，因此出现末尾跳帧、停顿的问题，火狐和Chromium内核浏览器对steps边缘帧的渲染逻辑存在细微差异，所以仅火狐表现正常。可将动画时间函数修改为steps(28, jump-none)，确保28帧每帧都能完整展示。
• 位移值浮点精度误差：你当前使用的translateX(-96.55172414%)是近似百分比值，不同浏览器对百分比浮点计算的精度处理不同，容易出现最后一帧位移不到位、循环时卡顿的问题。建议直接使用精确像素值transform: translateX(-11648px)，该值为28帧×单帧宽度416px的精确计算结果，可完全避免浮点误差。

内容的提问来源于stack exchange，提问作者Tomasz Galubiński