HTML5无尽背景动画

Question

我有动画的背景图片。

我怎么做无尽的动画？

（如果动画在页面的右侧，我想看到它出现在页面的左侧）

Answer 1

来自David Walsh - CSS Background Animations

的原始代码

X

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

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