Html 背景位置动画工作不顺畅

嗨，我有一些图像如下：

从左到右，从下到右，从左到右，依此类推

图像尺寸600 X 738为，无，且乡绅人数为5x5。 为了实现需求，我编写了如下css：

.可爱的你生气的你脸上冒出蒸汽{ 边界半径：5px； 显示：内联块； 线高：52px； 填充：2px2px 8px； 位置：相对位置； 文本对齐：居中； 宽度：120px； 高度：148px； 动画：可爱、快乐、笑脸0秒； 动画迭代次数：无限； 背景图片：url'https://i.stack.imgur.com/gQIqY.png'; 背景重复：无重复； 背景尺寸：960px 785px； 图像渲染：-webkit优化对比度； 边框：1px纯红； } @关键帧可爱、快乐、笑脸{ 0% { 背景位置：0px 0px； } 3% { 背景位置：120px 0px； } 6% { 背景位置：240px 0px； } 8% { 背景位置：360px 0px； } 11% { 背景位置：480px 0px； } 14% { 背景位置：600px 0px； } 17% { 背景位置：0px 148px； } 19% { 背景位置：120px 148px； } 22% { 背景位置：240px 148px； } 25% { 背景位置：360px 148px； } 28% { 背景位置：480px 148px； } 31% { 背景位置：600px 148px； } 33% { 背景位置：0px 295px； } 36% { 背景位置：120px 295px； } 39% { 背景位置：240px 295px； } 42% { 背景位置：360px 295px； } 44% { 背景位置：480px 295px； } 47% { 背景位置：600px 295px； } 50% { 背景位置：0px443px； } 53% { 背景位置：120px443px； } 56% { 背景位置：240px443px； } 58% { 背景位置：360px443px； } 61% { 背景位置：480px443px； } 64% { 背景位置：600px443px； } 67% { 背景位置：0px 590px； } 69% { 背景位置：120px 590px； } 72% { 背景位置：240px 590px； } 75% { 背景位置：360px 590px； } 78% { 背景位置：480px 590px； } 81% { 背景位置：600px 590px； } 83% { 背景位置：0px 738px； } 86% { 背景位置：120px 738px； } 89% { 背景位置：240px 738px； } 92% { 背景位置：360px 738px； } 94% { 背景位置：480px 738px； } 97% { 背景位置：600px 738px； } } /*{dim:[600738]，n:[5,5]}*/ .可爱的你生气的你脸上冒出蒸汽{ 边界半径：5px； 显示：内联块； 线高：52px； 填充：2px2px 8px； 位置：相对位置； 文本对齐：居中； 宽度：500px； 高度：500px； 动画：可爱、快乐、笑脸0 10秒； 动画迭代次数：无限； 背景图片：url'https://i.stack.imgur.com/gQIqY.png'; 背景重复：无重复； 背景尺寸：960px 785px； 图像渲染：-webkit优化对比度； 边框：1px纯红； 背景尺寸：封面； 背景位置：中心； } @关键帧可爱、快乐、笑脸{ 0%{背景位置：0px 0px；} 50%{背景位置：0px 200px；} 75%{背景位置：200px 200px；} 100%{背景位置：300px 500px；} } 标题

---

<> P>为了使它更容易，你可以考虑CSS变量，技巧是使用基于宽度高度的位置的负值。

您有5行5列和22个图像，因此可以将动画拆分为22个状态100/22=4.54。在每个状态下，我们在x轴上将一个变量从0增加到4，当我们达到4时，我们重置为0，并增加y轴

您还可以通过简单地更改CSS变量轻松地调整尺寸，这样您就不需要知道图像的宽度/高度，只需要知道行和列的数量

.可爱的你生气的你脸上冒出蒸汽{ 边界半径：5px； 显示：内联块； 边框：1px纯红； -w:120px； -h:148px； 宽度：var-w； 高度：var-h； 背景图片：url'https://i.stack.imgur.com/gQIqY.png'; 背景大小：calc5*var-w calc5*var-h； 动画：可爱、快乐、笑脸； } @关键帧可爱、快乐、笑脸{ 0%,4.54% { 背景位置：calc0*var-w calc0*var-h； } 4.55%,9.09% { 背景位置：calc-1*var-w calc0*var-h； } 9.10%,13.63% { 背景位置：calc-2*var-w calc0*var-h； } 13.64%,18.18% { 背景位置：calc-3*var-w calc0*var-h； } 18.19%,22.72% { 背景位置：calc-4*var-w calc0*var-h； } 22.73%,27.27% { 背景位置：calc0*var-w calc-1*var-h； } 27.28%,31.81% { 背景位置：calc-1*var-w calc-1*var-h； } 31.82%,36.36% { 背景位置：calc-2*var-w calc-1*var-h； } 36.37%,40.90% { 背景位置：calc-3*var-w calc-1*var -h； } 40.91%,45.45% { 背景位置：calc-4*var-w calc-1*var-h； } 45.46%,50% { 背景位置：calc0*var-w calc-2*var-h； } 50.01%,54.54% { 背景位置：calc-1*var-w calc-2*var-h； } 54.55%,59.09% { 背景位置：calc-2*var-w calc-2*var-h； } 59.10%,63.63% { 背景位置：calc-3*var-w calc-2*var-h； } 63.64%,68.18% { 背景位置：calc-4*var-w calc-2*var-h； } 68.19%,72.72% { 背景位置：calc0*var-w calc-3*var-h； } 72.73%,77.27% { 背景位置：calc-1*var-w calc-3*var-h； } 77.28%,81.81% { 背景位置：calc-2*var-w calc-3*var-h； } 81.82%,86.36% { 背景位置：calc-3*var-w calc-3*var-h； } 86.37%,90.9% { 背景位置：calc-4*var-w calc-3*var-h； } 90.91%,95.45% { 背景位置：calc0*var-w calc-4*var-h； } 95.46%,100% { 背景位置：calc-1*var-w calc-4*var-h； } }

---

动画必须是描述的每个图像应该从左到右显示相当于离散的，如果您正在寻找类似的内容，请立即向下检查，或者给我一个示例，以便我能提供帮助它必须是这样的它支持所有浏览器吗？@AkhileshKumar确切地说什么？您提供的css变量在所有主要应用程序中都受支持吗浏览器。？@AkhileshKumar是的，它们是：只有IE会失败，但这并不奇怪，它不会处理M x N大小的空插槽。如何处理？因为我有一些M x M和M x N，并动态生成css。你能帮我吗？