如何制作无限动画

问题描述

怎样才能制作出不停止而是循环播放的动画，它到达屏幕末端并从另一端开始？ 示例 gif：

解决方法

在您的示例中，它看起来像多层图像。 z-indexing 和 png 图像非背景会很复杂。

基本上，无限重复的动画是这样的：

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url("http://placehold.it/1600x800") repeat 0 0;
  background-size: auto 100%;
  animation: animatedBackground 10s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -3200px 0; /* image width X 2 */
  }
}