CSS ha evolucionado exponencialmente a lo largo de los años. Pasamos de diseñar con tablas y elementos feos e incómodos a crear de forma fácil sombras, bordes redondeados, tipografías personalizadas, diseñar la barra de scroll e incluso crear animaciones con CSS Sprites, como os voy a enseñar en este artículo. Aunque, en vez de lograr una animación continua de inicio a fin con cada keyframe de la imagen, con CSS Sprites podemos crearlo por pasos, es decir, steps(), gracias a TeamTreeHouse.

Animando con la función steps()

Con steps() podremos controlar el nº de keyframes renderizados en la animación, dicho de otra manera, podemos usar steps() para crear una simple hoja de caracteres animados.

TeamTreeHouse ha usado artboards de Illustrator para crear cada frame de animación en una imagen separada de 190×240 píxeles, luego se usó Compass’ spriting feature para generar una hoja de sprites conteniendo todas las imágenes exportadas.

monster

Creando la animación

Para animar el “monstruo”, crearemos una regla donde se definirá la anchura y altura y mostraremos el principal sprite como una imagen de fondo.

.monster {

width: 190px;
height: 240px;
background: url('monster-sprite.png') left center;
}

Luego necesitaremos crear un keyframe que anime la posición de fondo de la hoja de sprites. El ancho total en píxeles del sprite es de 1900px, así que lo animaremos de derecha a izquierda dándole una posición final de -1900. Esta animación es muy parecida a la que os mostré hace unos meses con el globo que giraba.

@keyframes play {
100% { background-position: -1900px; }
}

Corriendo la animación

En este punto, cuando definimos la secuencia de animación “play” con el selector “monster” con una duración de 0,8s, veremos la propiedad background position en nuestro sprite animándose rápidamente de izquierda a derecha.

.monster {
animation: play .8s;
}

Para conseguir el efecto animación frame a frame, necesitaremos incluir la función de tiempo steps() en el valor “nimation”. Como la hoja de sprites contiene 10 imágenes sprites, haremos 10 frames, o pasos, como queramos llamarlo. Así que definiremos a continuación 10 pasos en nuestra secuencia de animación:

.monster {

animation: play .8s steps(10);
}

Así que ahora la animación correrá 10 frames en 0,8 segundos. Usa la propeidad background-position para correr cada imagen sprite como un step.

Finalmente, ponemos el valor de animation-iteration-count a “infinite”, esto hará que la animación se repita infinitamente.

.monster {

animation: play .8s steps(10) infinite;
}

Para cambiar la velocidad de la animación, simplemente cambia el valor “animation-duration”. Así se vería la animación final en CodePen:

See the Pen CSS Animation with steps() by Guil H (@Guilh) on CodePen.