HTML5无尽背景动画

Question

我有动画的背景图片.

我怎么能做无尽的动画？

(如果动画在页面的右侧,我想看到它出现在页面的左侧)

Answer 1

David Walsh的原始代码- CSS背景动画

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