¿Quieres aprender a realizar proyectos como nuestra felicitación Navideña? Nosotros te explicamos de una forma sencilla cómo animar un sprite con tan solo usar CSS3.

Para realizar las animaciones de nuestra felicitación Navideña utilizamos la nueva función de temporización para animaciones de css3 steps(). Esta función nos permite que al realizar un animation , la animación se realice en segmentos o pasos que nosotros propongamos (algo similar a lo que ocurriría en un zoótropo).

Aunque pueda parecer complejo, realmente es un proceso muy simple al que cogeremos tranquillo con sólo practicar un par de veces.

Animation con steps()

Como hemos dicho, la funcion steps() nos permite ‘partir’ una animación en distintos pasos. Para ello realizamos un sprite con Photoshop en el que la acción esta dividida en distintos pasos ( en nuestro caso 8 pasos)

En el caso de la felicitación, cada Ms. Barrons mide 292×300 (cosa que hay que tener en cuenta porque es lo que medirá nuestro personaje finalmente) por lo que al ser 8 partes la imágen total mide 2333px de ancho por 300px de alto.

Creando la animación

Para animar a nuestra Ms. Barrons, primero creamos el ‘marco’ en donde va a ir dispuesta la imagen de fondo, y cuyas medidas serán las mismas que la de nuestro personaje (en nuestro caso 292×300).

.barrons {
  width: 292px;
  height: 300px;
  background: url('vestida.png') left center;
}

Ahora que ya hemos realizado el ‘marco’, tenemos que crear la regla que nos permita animar nuestra imagen de fondo. Como ésta mide 2333px de ancho, animaremos el fondo de derecha a izquierda hasta que la posición final del background sea -2333px.

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

Nosotros hemos llamado a nuestra regla «play» pero podeís llamarlo como vosotros queráis.

¡Que comience la animación!

Ya sólo nos queda realizar la animación. Para ello volvemos a nuestro marco y le incluimos los parámetros de animate que hemos programado con @keyframes.

.barrons {
  ...
  animation: play .8s;
}

¡¡¿Pero que pasa??!! No te preocupes, de momento nuestra animación funciona totalmente de seguido y es aquí cuando toma importancia la función steps(). Como nuestro background contiene 8 imágenes distintas, añadiremos a nuestra animation 8 pasos. Tambien añadiremos la variable infinite para que la animación se repita en loop.

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

Y con todo esto ya tenemos terminada nuestra animación. Hay que tener en cuenta todas las posibilidades que tiene esto, si lo combinamos con subclases de css o con jquery. Una manera realmente sencilla y fácil de realizar animaciones.

Y si os ha gustado echadle un ojo a nuestra felicitación navideña; por que muy pronto os enseñaremos como hicimos muchas más cosas.