Un sprite es el resultado de juntar varios fotogramas para crear una animación.

En este ejemplo lo que hacemos es crear la animación con una única imagen.

He cogido una imagen de 400×400 px y la he dividido en 4 columnas y 4 filas de 100×100 px. En cada una de las celdas he colocado un frame de la animación, el orden, de izquierda a derecha y de arriba a abajo.

Esta es la imagen utilizada, con medidas 400x400px

Con la CSS, lo que hacemos es marcar un área visible, coincidente con el tamaño de cada frame (100x100px) e ir sustituyendo lo que aparece en ese área moviendo la imagen grande. El resultado es una animación perfecta.

Aquí puedes ver el resultado, copiar el código HTML y el CSS

See the Pen oxWwRV by Omar Benyakhlef Domnguez (@gloobs) on CodePen.dark

Pulsa en 0.25x para ver bien la imagen

El código moveSpritesheet 1s indica el tiempo en el que se tiene que desarrollar el loop, es decir a más tiempo la animación será más lenta y viceversa.

Como podéis ver, el código es mínimo, por lo tanto poco peso y carga rápida, lo ideal !!!