Introducción a la animación CSS para principiantes

() translation by (you can also view the original English article)

Hoy en día, cada vez más sitios web utilizan animaciones, ya sea en forma de GIFs, SVGs, WebGL, vídeos de fondo, etc. Cuando se usa correctamente, la animación en la web aporta vida e interactividad, añadiendo una capa extra de retroalimentación y experiencia para los usuarios.

En este tutorial voy a iniciarte a las animaciones CSS; una forma de hacer las cosas que tiene un excelente rendimiento y que está siendo cada vez más popular conforme mejora el soporte de los navegadores. Después de haber cubierto los conceptos básicos, vamos a construir un rápido ejemplo que animará un elemento cuadrado hasta convertirlo en un círculo:

Una introducción a los @keyframes y la animación

El componente principal de las animaciones CSS es @keyframes, se trata de la regla CSS en donde se crea la animación. Concibe @keyframes como las etapas a lo largo de una línea de tiempo. Dentro de @keyframes, puedes definir estas etapas, cada una con una declaración de estilo diferente.

A continuación, para que las animaciones CSS funcionen, debes enlazar los @keyframes a un selector. Esto analizará gradualmente todo el código dentro de las declaraciones @keyframes y hará los cambios desde el estilo inicial al nuevo, en función de las etapas.

El @keyframes

Aquí vamos a establecer las etapas de la animación. Nuestras propiedades @keyframes son las siguientes:

Un nombre de nuestra elección (tutsFade en este caso).
Etapas: 0%-100%; de (igual a 0%) y a (igual al 100%).
Estilos CSS: el estilo que te gustaría aplicar a cada etapa.

Por ejemplo:

@keyframes tutsFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes tutsFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

o la abreviatura:

@keyframes tutsFade {
  to {
    opacity: 0;
  }
}

El código anterior aplicará una transición en la opacidad de un elemento, de opacity: 1 a opacity: 0. Cada uno de los enfoques anteriores logrará el mismo resultado final.

La animación

La propiedad animation se utiliza para llamar a @keyframes dentro de un selector CSS. La animación puede tener varias propiedades:

animation-name: nombre para @keyframes (recuerda que elegimos tutsFade).
animation-duration: la duración temporal, la duración total de la animación desde el principio hasta el final.
animation-timing-function: establece la aceleración de la animación (lineal | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
animation-delay: el retraso antes de que se inicie nuestra animación.
animation-iteration-count: cuántas veces se repetirá la animación.
animation-direction: te proporciona la capacidad de cambiar la dirección del bucle, de principio a fin, o de fin a principio, o ambos.
animation-fill-mode: especifica qué estilos se aplicarán al elemento cuando finalice nuestra animación ( none | forwards | backwards | both)

Por ejemplo:

.element {
  animation-name: tutsFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

o abreviado:

1	.element {
2	animation: tutsFade 4s 1s infinite linear alternate;
3	}

El código anterior creará un efecto parpadeante, con un retardo de animación de 1 segundo, una duración total de la animación de 4 segundos, con direcciones alternativas e iteraciones de bucle lineal infinito.

Añadir prefijos de proveedor

Aunque estamos con un borrador de trabajo, necesitamos utilizar prefijos específicos de navegador para garantizar la compatibilidad óptima con los navegadores. Se aplican los prefijos estándar:

Chrome & Safari: -webkit-
Firefox: -moz-
Opera: -o-
Internet Explorer: -ms-

Una propiedad animation con prefijos de proveedor tendrá el siguiente aspecto:

.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}

junto con @keyframes:

@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }

En aras de la legibilidad durante continuaré este tutorial sin usar prefijos, pero la versión final los incluirá y te animo a que tú también los uses en tu código CSS.

Para obtener más información sobre los prefijos de proveedor, puedes consultar http://css3please.com/, un excelente sitio web con los recursos de prefijos de proveedor.

Animaciones múltiples

Puedes agregar varias animaciones usando una coma como separador. Imagina que queremos agregar una rotación adicional a nuestro elemento tutsFade, lo haríamos declarando @keyframes adicionales y luego los vincularíamos con nuestro elemento:

.element {
  animation: tutsFade 4s 1s infinite linear alternate,
             tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
  to {
    opacity: 0;
  }
}
@keyframes tutsRotate {
  to {
    transform: rotate(180deg);
  }
}

Tutorial de cuadrado a círculo

Vamos a dar un salto y crear una transición de forma simple; una animación desde una forma cuadrada a una circular utilizando los anteriores principios. Tendremos cinco etapas en total y para cada etapa definiremos un radio de borde, una rotación y un color de fondo diferente para nuestro elemento. Basta de hablar, vamos con el código.

Elemento básico

En primer lugar, vamos a crear el marcado del elemento a animar. Ni siquiera vamos a molestarnos con los nombres de las clases, por ahora, sólo vamos a usar un simple div:

1	<div></div>

Después, usando un selector de elemento (div {}), añadimos los estilos al div:

div {
  width: 200px;
  height: 200px;
  background-color: coral; 
}

Declarar los fotogramas clave

Vamos a preparar ahora el @keyframes, al que vamos a llamar square-to-circle, y las cinco etapas

1	@keyframes square-to-circle {
2	0%{}
3	25%{}
4	50%{}
5	75%{}
6	100%{}
7	}

Necesitamos definir algunos estilos dentro de estas etapas, así que comencemos indicando el border-radius para cada una de las esquinas del cuadrado:

@-webkit-keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
  }
  25%  {
    border-radius:50% 0 0 0;
  }
  50%  {
    border-radius:50% 50% 0 0;
  }
  75%  {
    border-radius:50% 50% 50% 0;
  }
  100% {
    border-radius:50%;
  }
}

Además podemos declarar un background-color distinto para cada etapa.

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral; 
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon; 
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
  }
}

Para llevar a cabo realmente la idea, vayamos más allá de border-radius y de background-color girando el div y añadiendo un poco de interés visual.

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

Aplicar la animación

Después de haber definido nuestra animación de cuadrado a círculo, tenemos que aplicarla al div:

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite alternate;  
}

Aquí puedes ver que hemos añadido una propiedad animation abreviada, que indica:

El nombre-animación es square-to-circle.
La duración de la animación es 2s.
El retardo de la animación es 1s.
El recuento de animación-iteración es infinite, por lo que continuará indefinidamente.
Y la dirección de animación es alternate, por lo que se reproducirá de principio a fin, y después comenzará de nuevo desde el principio hasta el final, y así sucesivamente.

Usa la genial función de temporizador

Un último valor que podemos añadir a la propiedad animation es animation-timing-function. Esto definirá la velocidad, la aceleración y la desaceleración de nuestro movimiento. Esta función puede ser un valor muy detallado, algo incómodo de calcular manualmente, pero hay gran cantidad de sitios web gratuitos que proporcionan recursos y personalización en tiempo real para las funciones de sincronización de animación.

Una de estas herramientas es la herramienta CSS Easing Animation Tool, así que vamos a usar la función de cálculo de nuestra función de sincronización.

Me gustaría añadir un efecto elástico a nuestra animación square-to-circle, utilizando una función de bezier cúbico.

Después de haber jugado con los identificadores y generado algún tipo de curva de bezier, actualiza el valor de la función de temporizador de animación utilizando el fragmento proporcionado.

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  
}

El código final, sin utilizar prefijos de proveedor ( -webkit- , -moz-, -ms-, -o- ) es el siguiente:

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

Una última cosa

Todo funciona bien en los navegadores modernos, pero Firefox tiene la desagradable costumbre de hacer que los objetos se transformen de forma deficiente. Echa un vistazo a estos bordes irregulares para ver lo que quiero decir:

Por suerte, existe una solución a esto. Añade el siguiente borde transparente a tu div y Firefox renderizará las cosas perfectamente!

1	outline: 1px solid transparent;

Conclusión

¡Eso es todo! Hemos utilizado la sintaxis de animación CSS para crear una animación simple que se repite de forma continuada.

Soporte del navegador

Para obtener información actualizada sobre la compatibilidad de los navegadores con la animación CSS, echa un vistazo a Can I use… pero en pocas palabras, los navegadores compatibles incluyen: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+