Html 在没有动画的情况下更改背景位置

我有以下代码用于在CSS和HTML中上下文更改背景：

animation: animated 10s linear infinite;

@keyframes animated {
    0% { background-position: 0px bottom; }
    25% { background-position: -200px bottom; }
    50% { background-position: -400px bottom; }
    75% { background-position: -600px bottom; }
}

当前背景在动画中移动，但我希望背景切换位置一次性切换-因此图像似乎会发生变化而不是移动

---

只有CSS才有可能吗？

您可以删除CSS中的

线性

animation: animated 10s infinite;

@keyframes animated {
    0% { background-position: 0px bottom; }
    25% { background-position: -200px bottom; }
    50% { background-position: -400px bottom; }
    75% { background-position: -600px bottom; }
}

---

您可以删除CSS中的

linear

animation: animated 10s infinite;

@keyframes animated {
    0% { background-position: 0px bottom; }
    25% { background-position: -200px bottom; }
    50% { background-position: -400px bottom; }
    75% { background-position: -600px bottom; }
}

---

您需要使用

setTimeout

为

10000ms

的一些JS来切换背景位置

$（文档）.ready（函数（）{
var-koef=1；
setInterval（函数（）{
$（'#image'）.css（{'background-position-x'：600*-koef}）；
koef=！koef；
}, 1000);
});
#图像{
宽度：200px；
高度：200px；
背景：url(http://lorempixel.com/g/1000/200/)无重复0底；
}
您需要使用
设置超时时间为
10000ms
的一些JS来切换背景位置


$（文档）.ready（函数（）{
var-koef=1；
setInterval（函数（）{
$（'#image'）.css（{'background-position-x'：600*-koef}）；
koef=！koef；
}, 1000);
});
#图像{
宽度：200px；
高度：200px；
背景：url(http://lorempixel.com/g/1000/200/)无重复0底；
}
您需要做的是，而不是

25% { background-position: -200px bottom; }
50% { background-position: -400px bottom; }

你喜欢这样做：

25.01%, 50% { background-position: -200px bottom; }
50.01%, 75% { background-position: -400px bottom; }

因此，几乎可以消除从一个关键帧过渡到另一个关键帧所需的时间

演示：


*{填充：0；边距：0；}
#bg{宽度：100%；高度：100vh；
背景：url（'//www.planwallper.com/static/images/Fall Nature background Pictures.jpg'）不重复；
动画：幻灯片5s无限；
}
@关键帧幻灯片放映{
0%，25%{背景位置：0px底部；}
25.01%，50%{背景位置：-200px底部；}
50.01%，75%{背景位置：-400px底部；}
75.01%，100%{背景位置：-600px底部；}
}
您需要做的是，而不是

25% { background-position: -200px bottom; }
50% { background-position: -400px bottom; }

你喜欢这样做：

25.01%, 50% { background-position: -200px bottom; }
50.01%, 75% { background-position: -400px bottom; }

因此，几乎可以消除从一个关键帧过渡到另一个关键帧所需的时间

演示：


*{填充：0；边距：0；}
#bg{宽度：100%；高度：100vh；
背景：url（'//www.planwallper.com/static/images/Fall Nature background Pictures.jpg'）不重复；
动画：幻灯片5s无限；
}
@关键帧幻灯片放映{
0%，25%{背景位置：0px底部；}
25.01%，50%{背景位置：-200px底部；}
50.01%，75%{背景位置：-400px底部；}
75.01%，100%{背景位置：-600px底部；}
}
使用以下方法：

animation: animated 10s steps(4) linear infinite;
@keyframes animated {
  from {
    background-position: 0px 0px; }
  to {
    background-position: 600px 0px; }
}

使用以下命令：

animation: animated 10s steps(4) linear infinite;
@keyframes animated {
  from {
    background-position: 0px 0px; }
  to {
    background-position: 600px 0px; }
}

这难道不是简单地改变背景位置一次，而不是在4个背景位置之间无休止地改变吗？@MichaelNielsen你如何想象瞬间改变背景位置无限次？我把它想象成切换到一种方式，就是这样。有点像我给出的代码示例，它无休止地移动位置-只是现在它一点一点地移动背景，而不是直接“跳”到位置-200，然后-400，-600，然后在10秒内返回到0。这不是简单地改变背景位置一次吗，没有它在4个背景位置之间无休止的变化？@MichaelNielsen，你如何想象瞬间改变背景位置无限次？我把它想象成切换到一种方式，就是这样。有点像我给出的代码示例，它无休止地移动位置-只是现在它一点一点地移动背景，而不是直接“跳”到位置-200，然后-400，-600，然后在10秒内返回到0。这不是简单地改变背景位置一次吗，如果它在4个背景位置之间没有无休止的变化，“动画：动画10s无限；”给动画带来了一种轻松：（这不是简单地改变一次背景位置，而不是在4个背景位置之间无休止的变化吗？“动画：动画10s无限；”给动画带来了一种轻松：（优雅：）至少在我看来。我很高兴它有帮助：）享受编码！事实上，我刚刚阅读了其他答案，@Gerard通过使用CSS提供了一个更好的答案，我完全忘记了，这是最好的答案，但稍加调整<代码>动画：动画10秒步（4）无限优雅：）至少在我看来。我很高兴它有帮助：）享受编码！事实上，我刚刚阅读了其他答案，@Gerard通过使用CSS提供了一个更好的答案，我完全忘记了，这是最好的答案，但稍加调整<代码>动画：动画10秒步（4）无限是的，绝对更好，向上投票，这里有一个答案，但是，它应该是
动画：动画10s步骤（4）无限而不是肯定更好，向上投票，这里有一个答案，但是，它应该是
动画：动画10秒步骤（4）无限取而代之