CSS, Programación, ¿Cómo se hace?

¿Cómo se hace? Animaciones de sprites mediante CSS3

Hola amigos del código al día de hoy no es noticia que con la aparición de CSS3 se nos abren nuevas capacidades de programación en el ámbito de las animaciones HTML. Las aprovecharemos en esta ocasión para un ámbito no siempre suficientemente explícito en nuestras codificaciones, la optimización del código, y más concretamente, mediante sprites animados, pues hoy  veremos cómo en esencia no precisaremos nada de JavaScript para ello.

Utilizaremos un sprite en formato PNG de fondo transparente y ocho imágenes, tal como se muestra en la figura adjunta:

Animación de un sprite mediante CSS3

Esencialmente deberemos tratar con una regla y una propiedad, que describimos seguidamente:

La regla @keyframes es el núcleo de la definición de la animación en CSS3. Dentro de ella se especificará el estilo que se aplicará a la evolución de la animación. Esta regla se asocia a una propiedad correspondiente, de lo contrario no tendrá efecto alguno. Dicha propiedad es la denominada “animation”. (w3schools.com/css3/css3_animations.asp)

  • Para nuestro caso, se utilizarán las cotas from … to, que marcarán los estados inicial y final de la animación. Eso representa el valor inicial (0%) y el final (100%), interpolándose automáticamente los valores intermedios marcados en el valor de la función de iteración descrita en la propiedad de animación asociada –véase seguidamente-
  • También sería posible utilizar valores porcentuales de evolución, marcando estadios de evolución al 10, 20, … 90%, por ejemplo
  • Aunque no es obligatorio, es recomendable, en éste caso, también marcar los estados del 0 y 100%

La propiedad animation, por su parte, define las propiedades que tendrá la animación en sí. En ella se pasan una serie de parámetros –valores. (w3schools.com/cssref/css3_pr_animation.asp).

Su sintaxis es, en la forma más completa:

animation: name duration timing-function delay iteration-count direction;

Valor
name Nombre del keyframe que contiene –define- la animación
duration Especifica el tiempo que tardará la animación en reproducirse
timing-function Normalmente indicará las etapas de la animación
delay Tiempo de retardo antes de que comience la animación
iteration-count Recuento del número de veces que se repetirá
direction Indica, de repetirse, si se realizará en reversión o en ciclos con reinicio

Los valores pueden definirse separadamente, por ejemplo:

animation-duration: 0.8

  • El valor animation-timing-function que utilizaremos es la función steps, que marca el número de etapas de la animación, que a su vez coincidirá con el número de fotogramas del sprite
  • El valor animation-iteration-count puede tomar cualquier valor entero o infinite, que implica un bucle infinito
  • El valor animation-direction puede valer normal –valor por defecto- o alternate, en éste último caso se llevará a cabo en ciclos alternos en modo inverso.

Soporte en los diversos navegadores

La animación de sprites mediante CSS3, tal cual las exponemos en el presente artículo, mediante código CSS3 con @keyframes y animation:

  • Es soportado, tal cual se define por el W3C, en Internet Explorer 10, Opera y Firefox (Mozilla) en sus versiones más recientes
  • Los restantes navegadores precisan, al menos en el momento presente, de soporte particular para su ejecución. Dicho lo dicho, todos disponen de tales soportes –webkit, …-. Naturalmente, eso es algo que puede cambiar es cualquier nueva versión de los respectivos navegadores

Ejemplo de animación de sprites mediante CSS3

El ejemplo que sigue ilustramos la animación del sprite mostrado en la imagen del inicio del artículo; el código se muestra en el Listado 1 y esencialmente consta de:

  • La propiedad animation toma como primer parámetro el nombre de la propiedad que define la animación, véase más adelante
  • Su segundo parámetro fija el tiempo en segundos en que se realizará el ciclo de una animación completa, 0.8s
  • El tercer parámetro fija la función que realizará el ciclo de animación, se trata de steps, que toma a su vez de parámetros el número de etapas, 8, y se indica que eso marca el final del ciclo
  • El cuarto y, para nuestro caso, último parámetro, indica que el ciclo se repetirá indefinidamente, se le da el valor infitite
  • Respecto a la regla @keyframes, se da en su formato from … to
  • Eso supone fijar su punto de comienzo y su punto de finalización, que serán interpolados en base a la función definida en la propiedad animation
  • Dado que se trata de un sprite en línea, sólo se da el valor de la cota de “background-position”. Nótese que la cota se pasa con valor negativo, siendo los datos del comienzo y del final del sprite
  • Hemos dado el código con el soporte para los casos particulares de los diversos navegadores, aunque en sus versiones más recientes no los precisasen, como hemos comentado en el apartado anterior –Soporte en los diversos navegadores-

Nótese que se hace para todos los casos a modo de ilustración, dado que algunos, como las versiones anteriores a Internet Explorer 10, por poner un ejemplo, no dan soporte a este tipo de animación CSS3, mientras que la 10 no precisa de código particular alguno.

Ejemplo de animación de sprites con CSS3

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title></title>

<style>

@keyframes cartero {

from {

background-position: 0px;

}

to {

background-position: -560px;

}

}

@-ms-keyframes cartero {

from {

background-position: 0px;

}

to {

background-position: -560px;

}

}

@-o-keyframes cartero {

from {

background-position: 0px;

}

to {

background-position: -560px;

}

}

@-webkit-keyframes cartero {

from {

background-position: 0px;

}

to {

background-position: -560px;

}

}

@-moz-keyframes cartero {

from {

background-position: 0px;

}

to {

background-position: -560px;

}

}

.recorte {

width: 70px;

height: 112px;

background-image: url("cartero.png");

-ms-animation: cartero .8s steps(8, end) infinite;

-webkit-animation: cartero .8s steps(8, end) infinite;

-moz-animation: cartero .8s steps(8, end) infinite;

-o-animation: cartero .8s steps(8, end) infinite;

animation: cartero .8s steps(8, end) infinite;

}

</style>

</head>

<body>

<div class="recorte"></div>

</body>

</html>

Acerca de Bárbaro Javier Valmaseda Vázquez

Ingeniero con alma de deportista. Perfeccionista para sus proyectos. Amante de las series y de un buen libro. Aunque su trabajo normal no tiene nada que ver con la tecnología (Comercial de una agencia de excursiones).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *