Con la llegada de Firefox al entorno de los móviles (Firefox OS), la mayoría de los periódicos digitales sobre tecnología tienen ahora siempre la palabra “Firefox” en sus mentes. Tanto es así, que David Walsh ha creado una animación con CSS Sprites para emular a un zorro moviéndose. Este efecto es muy parecido al que os mostraba hace unas semanas de la bola del mundo rotando con CSS Sprites.

Para empezar, tenemos esta imagen, de 7020×576, una larga imagen.

Estructura

Únicamente se requiere un elemento HTML para la animación:

<div id="foxtail"></div>

CSS

Con la estructura añadida, el código CSS donde colocaremos la imagen de fondo sería así:

#foxtail {
background: url(foxtail.png) 0 0 no-repeat;
width: 156px;
height: 156px;
}

Con keyframes daremos el efecto de movimiento, animando la imagen actualizando la posición de fondo en cada momento. Todo se hace únicamente con CSS.

@keyframes animate-tail {
0% {background-position: -6864px 0; }
100% {background-position: 0 0;}
}

#foxtail {
animation: animate-tail 3.75s steps(44) infinite;
}

El zorro se animará infinitamente. Si queremos que esto funcione en navegadores antiguos, anñadimos esta línea de javascript al documento:

jQuery("#foxtail").sprite({ fps: 12, no_of_frames: 44, rewind: true });

Ejemplo

Podemos ver el ejemplo a continuación: