Las animaciones en CSS3

CSS3 sin duda añade numerosas funcionalidades a CSS. Nuevos selectores, esquinas redondeadas, sombras, transformaciones, gradientes, animaciones, etc.

Si os movéis en este mundillo, estoy seguro que sabéis que algunas opciones están mejor soportados en unos navegadores que en otros o que necesitan de un prefijo para funcionar. una de ellas tiene diferente grado de adaptación por parte de los navegadores por lo que, antes de hacer uso de alguna de estas características, es siempre interesante mirar los requisitos que tengamos en el proyecto y/o el impacto que pueda tener en el mismo.

Revisa siempre los requisitos de tu proyecto y el soporte para las diferentes características. ¡Puedes valerte de herramientas web como Can I Use para ello!

Hoy, como quizá hayas adivinado por el título, vamos a hablar de las animaciones. Las animaciones nos permiten animar ciertas propiedades de un elemento, realizando una transición entre un estado y el siguiente.

Los navegadores Firefox, Opera y Chrome, Safari llevan bastante tiempo dando soporte a esta característica (los dos últimos con prefijos), mientras que Internet Explorer ha empezado con IE10 a ofrecer soporte.

Hay dos formas de crear animaciones con CSS: Las animaciones y las transiciones.

Transiciones CSS

Las transiciones CSS nos permiten animar una o múltiples propiedades de un valor a otro. Al contrario que ocurre con las animaciones, las transiciones no requieren de @keyframes. Las transiciones suelen ocurrir en cambios de estado como :hover o :focus.

Veamos un sencillo ejemplo:

div.recuadro {  
  background: #fff;
  transition-property: background;
  transition-duration: 0.5s;
}
.recuadro:hover {
  background: #CCDD55;
}

En el ejemplo de arriba, cuando pasamos el ratón por encima del elemento, animamos un cambio en el color del fondo de blanco a verde. Cuando quitamos el ratón, vuelve al fondo blanco original.

Propiedades de una transición CSS

Aparte de dejarnos hacer transiciones básicas, tenemos algunas propiedades que nos permiten configurar cómo funcionará la animación:

  • transition-delay: Retraso en segundos antes de comenzar la transición.
  • transition-duration: Cantidad de tiempo en segundos que tarda la transición en completarse (p.ej: 666s o 3.14s)
  • transition-property: Una o más propiedades o all (todas), que serán animadas en la transición. Aunque en un primer momento pueda parecer buena idea usar siempre all, no lo es ya que según el código puede producir algún efecto indeseado si animamos varias propiedades.
  • transition-timing-function: Función de curva de tiempo que usará la transición. Estas funciones se pueden crear con la función cubic-bezier aunque es un tema en el que no vamos a entrar. No obstante, CSS3 nos ofrece las siguientes: - ease: Esta es la función por defecto. Comienza lentamente, luego se acelera y acaba lentamente.
  • linear: Esta función deja la misma velocidad desde el principio hasta el final.
  • ease-in: Esta función comienza con lentamente.
  • ease-out: Esta función acaba lentamente.
  • ease-in-out: Comienza y acaba lentamente.

Veamos un ejemplo de transición que use todas las propiedades disponibles. Ten en cuenta que esto es solo eso, un ejemplo y en la mayoría de las ocasiones lograremos un bonito efecto añadiendo un poco de duración y nada más.

¿Y qué pasa si no quiero poner all pero quiero que se transicionen varias propiedades?

En ese caso, puedes usar cualquier de estos formatos:

.recuadro {
  transition-property: background, color, opacity;
  transition-duration: 1s, 2s, 3s;
}
// Todo junto 
.recuadro {
  transition: background 1s, color 2s, opacity 3s;
}

Animaciones CSS

Las animaciones CSS son un poco más complejas pero como veréis, no se salen mucho de lo que ya hemos visto. Éstas nos permiten crear animaciones sin el uso de JavaScript ni Flash. Las animaciones necesitan ser creadas y luego ser añadidas a un elemento CSS. Seguro que ahora mismo te sientes perdido, vamos con un breve ejemplo.

Vamos a verlo poco a poco.

Con @keyframe creamos la animación propiamente dicha. En la que básicamente le indicamos cómo empieza y como acaba. En este caso empieza normal y acaba agrandado.

Luego, en hover le indicamos que debe usar la animación agrandar que acabamos de crear, a través de la propiedad animation-name. Le indicamos las veces que queremos que se repita, en este caso 2, con la propiedad animation-iteration-count. El resto de propiedades, como ves, son similares a las de las transiciones.

La propiedad animation-iteration-count puede tener el valor infinite con lo que la animación se repetiría sin cesar.

Las animaciones no se quedan aquí, y nos permiten ampliar el concepto from y to usando porcentajes, que nos marcan el progreso de la animación en el tiempo establecido. Veamos un nuevo ejemplo:

Como ves, cada 10% vamos ampliando o reduciendo el tamaño de la caja produciendo varias “animaciones” en el mismo intervalo de tiempo.

Os dejo un par de animaciones que uso en una aplicación para mostrar llamadas en tiempo real. La primera es para mostrar que a alguien le está sonando una llamada y la segunda es para mostrar un candidato al que transferirle una llamada.

Anímate a animar algo

Ahora que las animaciones y las transiciones CSS se pueden usar en bastantes navegadores (quitando

Os dejo algunos ejemplos de cosas que se pueden hacer con estos efectos:

Recuerda que si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.