⇪

Animaciones con @keyframes

facebook-svg gplus-svg twitter-svg

Las transiciones son fantásticas para animaciones sencillas. Para cosas más complicadas tenemos las animaciones CSS3 especificadas en el módulo CSS Animations

Veamos un ejemplo: a continuación queremos animar al elemento .animable. A decir la verdad será una animación básica que, en solo dos fotogramas, cambiará el color de fondo. Para esto designamos el nombre ( animation-name: cambiarColor ) y la duración de la animación ( animation-duration: 5s ). La tercera regla ( animation-iteration-count: infinite ) nos dice que la animación se repite indefinidamente. 

.animable {
    animation-name: cambiarColor;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }

Necesitamos utilizar prefijos para que la animación funcione correctamente en varios navegadores.

.animable {
    -webkit-animation-name: cambiarColor;
    animation-name: cambiarColor;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

Claro que si queremos ser precavidos podemos utilizar también –moz- y –o-, aunque el soporte actual de las animaciones nos permite utilizar solo –webkit-. Después de todo, utilizamos las animaciones para mejorar la experiencia del usuario, y la falta de animación no tiene que interferir con la funcionalidad.

Vea el soporte de las animaciones CSS3 en los navegadores.

@keyframes

Ya sabemos que  una animación se compone  de una secuencia de fotogramas ( keyframes ). Veamos cómo definirlas en el CSS3.
La sintaxis utilizada es muy parecida a la de @media-query o de @font-face. Una regla que define las fotogramas a utilizar empieza con la palabra clave @keyframes seguida por el nombre de la animación: cambiarColor en este caso. A continuación entre llaves {} aparecen las fotogramas. 

@keyframes cambiarColor {   
      /*las fotogramas para cambiarColor */
  }

Durante la animación el color de fondo del elemento .animable cambiará de amarillo ( #ffffef ) a blanco ( #fff ). La animación cuenta con dos fotogramas: al principio ( 0% ) y al final ( 100% ) de los 5 segundos de duración.

@keyframes cambiarColor {   
     0%   { background-color: #ffffef;}   
     100% { background-color: #fff;}  
  }

¡Ojo!: los selectores de las fotogramas 0% y 100% son porcentajes y tienen que llevar el símbolo %. También podemos utilizar como selectores las palabras clave from ( desde ) en lugar de 0% y to ( hasta ) en lugar de 100%.

@keyframes cambiarColor {   
     from { background-color: #ffffef;}   
     to   { background-color: #fff;}  
  }

Y de nuevo: necesitamos utilizar prefijos para que la animación funcione correctamente en varios navegadores.

@-webkit-keyframes cambiarColor {   
     0%  { background-color: #ffffef;}   
    100% { background-color: #fff; }   
  } 
  @keyframes cambiarColor {   
     0%   { background-color: #ffffef;}   
     100% { background-color: #fff;}  
  } 




.animable {
  width: 250px;
  height: 150px;
  border: 1px solid #d9d9d9;
  margin: 0 auto;
  -webkit-animation-name: cambiarColor;
  animation-name: cambiarColor;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes cambiarColor {
  0% {
    background-color: #ffffef;
  }
  100% {
    background-color: #fff;
  }
}

@keyframes cambiarColor {
  0% {
    background-color: #ffffef;
  }
  100% {
    background-color: #fff;
  }
}

table.cheatsheet.referencia tr th {
  background-color: #CC3366;
  color: #fff;
}

Otras propiedades de las animaciones CSS3

Propiedad Sintaxis Descripción
@keyframes @keyframes nombre_animacion
{ keyframes-selector {css-styles;}
}		 Con @keyframes podemos crear animaciones
animation animation: name duration timing-function delay iteration-count direction fill-mode play-state; Establece todas las propiedades de la animación en una sola declaración abreviada
animation-delay animation-delay: tiempo en segundos o milisegundos; Define cuando la animación se iniciará
animation-direction animation-direction: normal | reverse | alternate | alternate-reverse; Define si la animación debe reproducirse hacia atrás o en ciclos alternos
animation-duration animation-duration: tiempo en segundos o milisegundos; Define el número de segundos o milisegundos que la animación tarda en realizarse
animation-fill-mode animation-fill-mode: none|forwards|backwards|both; Especifica como debe comportarse el elemento cuando la animación esta en pausa.
Si animation-fill-mode: none, el elemento vuelve al punto de partida. Si animation-fill-mode: forwards el elemento se queda en el punto donde acabó la animación.
animation-iteration-count animation-iteration-count: n veces | infinite; Define cuántas veces hay que reproducir la animación.
animation-name animation-name: nombre_animacion | none; Especifica un nombre para la animación de @keyframes
animation-timing-function animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) Especifica la curva de velocidad de la animación
animation-play-state animation-play-state: paused | running; El estado de la animación. Especifica si la animación está en ejecución o en pausa

La declaración abreviada

La declaración abreviada establece todas las propiedades de la animación en una sola declaración, y tiene este aspecto:

animation: nombre duración función-de-temporizador demora número-de-iteraciones dirección fill-mode estado-de-la-animación;

Un caso práctico

Una de las más útiles aplicaciones de @keyframes es "la técnica del amarillo desvaneciente" ( The Yellow Fade Technique  ). Se trata de una forma elegante de atraer la atención del usuario hacia una cierta zona en la página. Veamos cómo.

Todos sabemos cómo enlazar a un elemento con un id especificado dentro de una página ( el atributo name ya no es compatible con HTML5 ).

<p id="arriba">Arriba</p>
. . . .
<a href="#arriba">Ir arriba</a>

El elemento enlazado es un elemento de destino, o un elemento "target". Podemos dar formato al elemento de destino utilizando el selector :target de CSS3.

 :target {
    border: 1px solid #d9d9d9;
    background-color:#FFC;
 }

En el siguiente ejemplo utilizamos el selector :target para animar el fondo ( background ) y el borde del <article> enlazado.

El html tiene una estructura básica: hay 6 enlaces <a> hacia sendos artículos <article> situados en la página. Los artículos tienen asignados un id para poder ser enlazados. Al hacer clic sobre uno de los enlaces el usuario será dirigido hacia el articulo de destino.

En el CSS utilizamos el selector :target para cambiar el color de fondo del <article> enlazado a amarillo ( #ffffef ). Utilizando @keyframe hacemos que el color desvanezca en una animación que dura 2 segundos. La propiedad animation-timing-function especifica la curva de velocidad de la animación a través de una función de temporización ( en este caso ease-out ).

Lea más acerca de funciones de temporización.


article:target{
  -webkit-animation-name: articleTarget; 
  animation-name: articleTarget;
  
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes articleTarget {
  0%   { background-color: #ffffef; border-color:#b0b0b0;}
  100% { background-color: #fff; border-color:#ededed; }
}
@keyframes articleTarget {
  0%   { background-color: #ffffef; border-color:#b0b0b0;}
  100% { background-color: #fff;  border-color:#ededed;}
}

DEMO: La técnica del amarillo desvaneciente - un ejemplo práctico

Enlaces útiles

- w3.org: el módulo CSS Animations
- Web Design Tip: The Yellow Fade Technique
- Lea más acerca de funciones de temporización
- Paul Irish: High Performance Animations
- Autoprefixer Playground
- Animate.css Just-add-water CSS animations
- Animatable One property, two values, endless possibilities
- CSS3 vs jQuery Animations
- Ceaser CSS EASING ANIMATION TOOL
- Craig Buckler: How to Capture CSS3 Animation Events in JavaScript
- Stackoverflow: Detect which CSS animation just ended in JavaScript?
- El soporte de las animaciones CSS3 en los navegadores.