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