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