CSS 来回平移背景图片

Question

我正在寻找一种仅 CSS 动画背景图像的方法，类似于此处给出的示例：

https://www.html5andbeyond.com/css3-animated-backgrounds-infinite-scrolling-background/

但不是无限循环，我希望图像（山景）慢慢来回平移，这样在页面加载时，查看者会看到图像的左侧，几秒钟后会看到右侧, 然后又回来了。

一个重要的警告是带背景的 div 是全宽的，因此要为动画设置绝对值。

感谢您的任何建议。

编辑：这是上面链接示例中的滚动代码

<style>
@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -99999999px 0;} }

@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -99999999px 0;} }

#mtn-scroll {
width: 100%;
height: 35em;
background: url(mtns.jpg) no-repeat;
-webkit-animation: backgroundScroll 999999s linear infinite;
animation: backgroundScroll 999999s linear infinite; }
</style>

<div id="mtn-scroll"></div>

Answer 1

您只需要将关键帧动画更改为百分比即可。

@keyframes backgroundScroll {
    0%   {background-position: 0 0;}
    50%  {background-position: -400px 0;}
    100% {background-position: 0 0;}
}

然后将动画时间加倍。

background: url(bg-repeat.png) repeat-y;
    animation: backgroundScroll 40s linear infinite;
}

Answer 2

基于 Hunter Turner 的回答，这就是我的最终结果。

<style>
@keyframes backgroundScroll {
0% { background-position: 50% 50%; }
33% { background-position: 1% 50%; }
40% { background-position: 1% 50%; }
66% { background-position: 99% 50%; }
75% { background-position: 99% 50%; }
100% { background-position: 50% 50%; }}
/* added pauses to each edge of the image */

#mtn-scroll {
width: 100%;
height: 35em;
background: url(mtns.jpg) no-repeat;
background-size: 150%;
background-position: 50% 50%;
animation: backgroundScroll 60s ease-in-out 1s infinite; }
</style>

<div id="mtn-scroll"></div>

CSS 来回平移背景图片

CSS to pan background image back and forth

html

css

background-image

css-animations