Menú Cerrar

Animaciones con @keyframes

Después de las agujetas fruto de revivir este blog la semana pasada, creo que toca hacer un post un poco más técnico. Espero ir aumentando el ritmo poco a poco. Para este reestreno he escogido hablar de los @keyframes de CSS3. Con CSS3 se pueden conseguir cosas muy espectaculares que antiguamente ni se soñaban, los más viejos del lugar pueden dar fe de ello. Da muchas posibilidades para las que antes era necesario el Javascript, en la mayoría de los casos con resultados muy lentos y de poca calidad.

Los @keyframes son una especie de funciones en las que se definen algunos fotogramas clave dentro de secuencias y que después se pueden llamar desde animaciones, transformaciones, etc. Sólo con ver la sintaxis de un @keyframes es fácil pensar que es la definición de una función en casi cualquier lenguaje. Aunque el CSS3 es limitado, un poco más y no haría falta Javascript. A veces pienso que se les ha ido un poco la mano en la W3C, al fin y al cabo ejecuta cosas alejándose de la simple asignación de valores a las propiedades de clases y demás.

Se pueden hacer muchos efectos y animaciones que combinándolos podrían llenar libros y libros. En este post me voy centrar en un par de animaciones sencillas, dejo para más adelante más ejemplos.

Como ya he dicho antes @keyframes sirve para definir fotogramas clave dentro de secuencias. Hay dos formatos para localizar y definir un fotograma clave:

@keyframes nombre {
    from {...}
    to {...}
}

o

@keyframes nombre {
    0%{...}
    10%{...}
    27%{...}
...
    100%{...}
}

En el primer formato se puede definir el primer y el último fotograma. Se pueden definir los dos o sólo uno, utilizando sólo to o from. En el segundo formato se escoge el fotograma indicando el porcentaje (posición) en la secuencia en la que se ejecutaría. 0% equivale a to y 100% a from. Utilizar los porcentajes da muchas más posibilidades de control sobre la secuencia. Todo lo que ocurra entre los fotograma clave definidos será calculado y ejecutado automáticamente. Entre las llaves de cada fotograma se puede definir cualquier propiedad CSS. Desde establecer un ancho (width) del elemento a rotarlo (rotate) en 2 o 3 dimensiones.

Para mostrar como funciona los @keyframes en preparado un par de ejemplos. Para animar algo lo primero es tener ese algo que animar y ya que casualmente mañana por la noche es Halloween, creo que toca:

Calabaza de Halloween

Dándole al botón «Dale» se procederá a intentar marear la calabaza:

1

Antes de continuar aviso que para curarme en salud he puesto los selectores necesarios para que funcione en los navegadores típicos, haciendo el código un poco más largo. Al pulsar sobre el botón «Dale» hará una animación (animation) que ejecutará el @keyframes «gira» para que en un segundo de una vuelta completa y que lo hará de forma uniforme, para lo que se define el easing como «linear», al final se indica que la animación no pare de repetirse con «infinite». En el @keyframes la definición es muy sencilla, sólo es necesario definir el primer y último fotograma, indicando que rote (rotation) 0 grados en el primero y que al llegar al final debe estar a 360 grados.
Calabazas de Halloween

Esta imagen contiene los diferentes fotogramas de la siguiente animación y que al ejecutar quedará:

1

En este segundo ejemplo se puede ver como la calabaza pierde su alma y desaparece. A diferencia del ejemplo anterior el @keyframes se llamará «desaparece» y durará tres segundos. Con la función steps se indica que hay 12 fotogramas y finalmente forwards servirá para que al llegar al final no vuelva la secuencia al primer fotograma. Para que funcione esta sencilla animación se ha definido en el @keyframes el último fotograma en el que se establece la posición final del fondo que será left -1440px. La imagen utilizada tiene un ancho de 1440 pixeles de los que cada fotograma tendrá 120px. Las dimensiones del div han sido definidos en la clase .calabaza. Estableciendo con steps los 12 pasos de la animación el @keyframes divide los 1440px de ancho totales entre 12 consiguiendo el trozo correspondiente a cada paso de 120px. Para que esto resulte es necesario que la imagen tenga todos los trozos perfectamente colocados.

Como he dicho antes, las posibilidades son muchas y estos dos ejemplos sólo son una pequeñísima muestra.

Las calabazas utilizadas han sido descargadas de The Spriters Resource.