CSS泛背景圖片來回

-2

我正在尋找一個只有CSS-方式動畫的背景圖像，類似於此處給出的示例：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>

來源

2015-11-20 BHammond

請問您可以在這裏發佈該文章中的必要代碼嗎？ –

請說明您在做問題時所做的任何嘗試，然後如果您所嘗試的是造成問題，我們可以提供幫助。 – Shane

因此，爲背景位置設置動畫，然後在無限循環中從一側移動到另一側，然後返回... – CBroe

你只需要在關鍵幀動畫改變百分比從例如滾動代碼。

@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; 
}

來源

2015-11-20 20:09:42

嗯。除了圖像的邊緣進入視口之外，這幾乎起作用。但有足夠寬的圖像可以工作。 – BHammond

建立在亨特特納的回答，這裏是我最終與。

<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>

來源

2015-11-20 21:52:28 BHammond

CSS泛背景圖片來回

回答

相關問題