HTML5無盡背景動畫

Question

我有動畫背景圖片。

我該如何做無盡的動畫？

（如果動畫進入頁面的右側，我希望看到它出現在頁面的左側）

Answer 1

原代碼David Walsh - CSS Background Animations

@keyframes animatedBackground { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 100% 0; 
 
    } 
 
} 
 
#animate-area { 
 
    width: 560px; 
 
    height: 400px; 
 
    background-image: url(https://davidwalsh.name/demo/bg-clouds.png); 
 
    background-position: 0px 0px; 
 
    background-repeat: repeat-x; 
 
    animation: animatedBackground 40s linear infinite; 
 
}

<div id="animate-area"></div>

Answer 2

我發佈這個，因爲你說從左到右。 你可以使用這樣的東西。

#horizontal-scroll { 
 
    width: 1439px; 
 
    height: 1170px; 
 
    background: black url(https://assets.periscope.tv/images/map.svg); 
 
    -webkit-animation: backgroundScroll 50s linear infinite; 
 
    animation: backgroundScroll 50s linear infinite; 
 
} 
 
@-webkit-keyframes backgroundScroll { 
 
    from { 
 
background-position: -1439px 0; 
 
    } 
 
    to { 
 
background-position: 0 0; 
 
    } 
 
} 
 
@keyframes backgroundScroll { 
 
    from { 
 
background-position: -1439px 0; 
 
    } 
 
    to { 
 
background-position: 0 0; 
 
    } 
 
}

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

Answer 3

@keyframes customname 
{ 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 


classname 
{ 
    background-image: url(Url of tyour file); 
    width: width of the file; 
    height: Height of the file; 
    background-position: 0px 0px; 
    background-repeat: repeat-x; //Repeating through X axis only 

    animation: customname 40s linear infinite; 
}