How to make infinite animation

Question

How can you make moving image animation which won't stop but loops when it reaches the end of the screen and starts from another end? Example gif:

Answer 1

In your example, it looks like multi-layers of images. It will be complex by z-indexing and png images non-background.

Basically, the animation repeated infinitely will be something like that:

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 */
  }
}