Question

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

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

但不是无限循环，我希望图像（moutainscape）来回慢慢地平移，所以在页面加载时，观看者会看到图像的左侧，几秒钟后会看到右侧，然后又回来了。

一个重要的警告是背景的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

以亨特特纳的答案为基础，这就是我最终的目标。

data test3;
set test2;
by grp_acct_no trans_date;
if Not (first.grp_acct_no =1  and first.trans_date =1 ) then delete;

run;

CSS来回平移背景图像

2 个答案: