Hoy en día, muchos sitios web tienen animaciones de imágenes en movimiento. Este no es diferente. Este tipo de animaciones son bastante fáciles de codificar y te mostraré en tres sencillos pasos.
Paso 1

Para esta animación, tomé una imagen de nubes y la animé. Haz un div y dale a la imagen de la nube como su imagen de fondo. Luego, encierra el div dentro de otro div que servirá como envoltorio div.
HTML

<div id="sky">
 <div id="clouds"></div>
</div> 
 
 
CSS

#clouds {
 background-image: url('pic.jpg');
 background-size: cover;
}


Paso 2

Proporcione el ancho de div de la imagen al 200% de modo que solo veamos el 100% (es decir, la mitad de la imagen) en la pantalla a la vez, para ver una imagen continua mientras la imagen se desplaza.

Give overflow: hidden al div externo para evitar la barra de desplazamiento horizontal (ya que el ancho de la div de la imagen es dos veces el ancho de la pantalla).

CSS

#sky {
 overflow: hidden;
}
#clouds {
 width: 200%;
 height: 400px;
 background-image: url('pic.jpg');
 background-size: cover;
}
 
Paso 3

Ahora es el momento de la animación. Para eso, se usa la regla @keyframes. La
 idea es colocar el extremo izquierdo de la imagen en el margen 
izquierdo: 0px al comienzo de la animación y en el margen izquierdo: 
-100% al final de la animación. Como un efecto de esto, la 
primera mitad de la imagen es visible cuando la animación comienza, y la
 segunda mitad de la imagen es visible ya que la animación está completa
 al 100%.

Finalmente, para hacer que la imagen dure para siempre, dé el valor infinito a la animación de la propiedad. Llamé a la animación 'moving clouds' y la duración de la animación 25 segundos. Cuanto mayor sea la duración de la animación, menor será la velocidad de la animación.

Entonces, el código final se da a continuación.

HTML
 
HTML
<div id="sky">
 <div id="clouds"></div>
</div>
CSS
#sky {
 overflow: hidden;
}
#clouds {
 width: 200%;
 height: 400px;
 background-image: url('pic.jpg');
 background-size: cover;
 -webkit-animation: movingclouds 25s linear infinite;
 -moz-animation: movingclouds 25s linear infinite;
 -o-animation: movingclouds 25s linear infinite;
}
@keyframes movingclouds {
 0% {margin-left: 0%;}
 100% {margin-left: -100%;}
}