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

Question

我有这段代码可以在 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 有可能吗？

Answer 1

你需要做的是，而不是

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

你这样做是这样的:

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

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

演示:jsFiddle

*{ padding:0; margin:0; }
#bg{ width:100%; height:100vh;
  background: url('//www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg') no-repeat;
  animation: slideshow 5s infinite;
}
@keyframes slideshow {
  0%, 25% { background-position: 0px bottom; }
  25.01%, 50% { background-position: -200px bottom; }
  50.01%, 75% { background-position: -400px bottom; }
  75.01%, 100% { background-position: -600px bottom; }
}

<div id="bg"></div>