Cuando queremos animar en CSS3 un elemento a menudo tenemos que hacer sprites muy largos y el problema surge cuando no posicionamos en el mismo lugar los frames del sprite. Para ello os recomiendo que ejecutéis un sencillo pero eficaz comando del terminal.

Primero deberemos conectar mediante ssh a nuestro servidor, mediante este script (os pedirá la contraseña):

ssh usuario@nombredelservidor.com

Una vez conectado vamos a la carpeta de nuestras imagenes. Es importante que tengamos todos los frames de nuestra animación y sólo los frames, ya que si hay alguna imagen más también la insertará en el sprite.

Ejecutamos el comando:

montage *.png -background none -tile x1  -geometry +0+0 nombredelaimagen.png

¡Y listo! Nos pondrá la nueva imagen dentro de la misma carpeta (si no la véis refrescad la vista de los archivos y aparecerá).