Cuando empiezas a animar elementos en CSS es muy común confundir animaciones con transiciones, o pensar que basta con cambiar una propiedad para que "algo se anime". En la práctica, las animaciones CSS funcionan de una forma bastante concreta: el navegador interpola valores a lo largo del tiempo siguiendo una secuencia que nosotros definimos.

En mi caso, cuando empecé a trabajar con animaciones, el mayor clic mental fue entender que no estaba cambiando estilos directamente, sino definiendo cómo cambian esos estilos en el tiempo. A partir de ahí, todo empieza a tener mucho más sentido.

En esta entrada sobre CSS daremos los primeros pasos con las animaciones en CSS; veremos cómo los @keyframes son fundamentales para crear animaciones, cómo animar nuestros elementos y algunas comparaciones entre las animaciones y las transiciones en CSS.

Animaciones vs Transiciones en CSS

Antes de entrar en materia, conviene aclarar una duda muy habitual entre quienes empiezan con CSS.

Las transiciones CSS son cambios suaves entre dos estados: uno inicial y uno final. Necesitan un desencadenante (:hover, :focus, una clase añadida con JavaScript, etc.) y el navegador se encarga de interpolar el cambio entre ambos extremos.

Por ejemplo, pasar de un fondo rojo a uno azul en 4 segundos:

Las animaciones CSS, en cambio, no se limitan a dos estados. Funcionan como una secuencia de estados distribuidos a lo largo del tiempo, y además pueden iniciarse automáticamente sin que el usuario haga nada.

Aquí fue donde yo empecé a ver la diferencia real: replicar una animación con varios cambios intermedios usando solo transiciones suele convertirse en un reto innecesario. Con animaciones, ese control viene de serie.

Fácilmente podríamos cambiar de un color a otro con JavaScript accediendo directamente al valor de la propiedad background y cambiando el color; pero esto no son transiciones, ya que son cambios bruscos de un estado a otro, sin interpolación de por medio.

Qué es una animación CSS y cómo funciona realmente

Una animación CSS está compuesta siempre por dos bloques que trabajan juntos:

• La regla @keyframes, donde se definen los distintos estados de la animación.
• Las propiedades animation, que indican cómo se ejecuta esa animación.

Sin uno de estos dos elementos, la animación no existe o simplemente no se verá.

Conceptualmente, el funcionamiento es el siguiente:

• Definimos una duración total con animation-duration.
• Marcamos puntos clave dentro de ese tiempo usando porcentajes o las palabras clave from y to.
• El navegador calcula automáticamente los valores intermedios entre un punto y otro (interpolación).

En otras palabras: nosotros marcamos los hitos, y el navegador hace el trabajo pesado.

El papel de los @keyframes en las animaciones CSS

Dos bloques componen las animaciones en CSS:

• Los @keyframes.
• Las propiedades de las animaciones.

Los @keyframes son el corazón de las animaciones CSS. Aquí es donde se define qué ocurre en cada momento relevante de la animación: qué propiedades cambian y con qué valores.

Un ejemplo muy sencillo:

@keyframes cambiarColor {
  from { background: red; }
  to { background: blue; }
}

Este bloque define dos estados:

• from (equivalente a 0%): estado inicial.
• to (equivalente a 100%): estado final.

Pero lo verdaderamente interesante aparece cuando usamos porcentajes para definir estados intermedios.

Sin ambos componentes trabajando en conjunto no es posible realizar una animación en CSS.

Al igual que las transiciones en CSS, las animaciones actúan directamente sobre las propiedades del elemento HTML en un intervalo de tiempo determinado para cambiar de un estado a otro; sin embargo, con las animaciones tenemos un control bastante más preciso sobre cómo y cuándo ocurre cada cambio.

Empezando con las animaciones en CSS

Veamos una animación sencilla para empezar a entenderlas. Por ahora solo nos enfocaremos en los @keyframes, que permiten crear frames o fotogramas para definir cada uno de los estados de la animación; aunque por sí solos no son suficientes para hacer funcionar una animación.

Esta animación permite cambiar el color de fondo (background) de un elemento; en este caso de un contenedor <div>:

@keyframes cambiarColorFondo {   
	from { background: red;}   
	to   { background: blue;} 
}

Obteniendo la siguiente animación en CSS:

También obtendríamos el mismo resultado estructurando la animación con porcentajes en lugar de from y to:

@keyframes cambiarColor {   
     0%   { background-color: red;}   
     100% { background-color: blue;}  
  }

Cómo funcionan los porcentajes en una animación CSS

Aquí es donde mucha gente se pierde al principio, y también donde yo entendí de verdad cómo funcionan las animaciones.

Los porcentajes en los @keyframes no representan estados visuales aislados, sino porciones del tiempo total de la animación. Cada porcentaje indica en qué momento exacto del ciclo se deben aplicar esas propiedades.

Si una animación dura 8 segundos:

• 25% corresponde a los primeros 2 segundos.
• 50% llega hasta el segundo 4.
• 75% hasta el segundo 6.

Por ejemplo:

@keyframes cambiarColor {
0% {
	background: #FF0000;
	width: 50%
}

25% {
	background: #FFAAAA;
	width: 80%;
}

50% {
	-webkit-box-shadow: inset 0px 0px 0px 10px #BB0000;
	-moz-box-shadow: inset 0px 0px 0px 10px #BB0000;
	box-shadow: inset 0px 0px 0px 10px #BB0000;
	border-radius: 200px
}

75% {
	width: 120px;
}

100% {
	background: #FF0000;
	width: 50%
}
}

El navegador interpola progresivamente los valores entre cada porcentaje. No hay saltos bruscos: todo ocurre de forma fluida dentro del intervalo asignado.

Cuando entiendes esto, empiezas a pensar las animaciones como una línea de tiempo, no como simples cambios de estilos puntuales.

Empleando porcentajes en lugar de from (desplazamiento inicial, equivalente a 0%) y to (desplazamiento final, equivalente a 100%), es posible personalizar mucho más cada fotograma de la animación. Esta es una de las ventajas claras de las animaciones sobre las transiciones: con @keyframes puedes definir tantos puntos de control como necesites a lo largo del tiempo.

Replicar el ejemplo anterior usando solo transiciones sería todo un reto y, en la mayoría de los casos, directamente imposible sin recurrir a JavaScript.

Como puedes ver, poder intervenir en intervalos de tiempo concretos para modificar propiedades resulta tremendamente útil. En el ejemplo anterior, donde el tiempo global de la animación son 8 segundos (definido mediante las propiedades que veremos en la siguiente sección):

El segundo valor del @keyframes es 25%, lo que indica que los estilos definidos ahí se irán aplicando progresivamente entre el segundo 0 y el segundo 2. Es decir, cambiarán el background y el width del contenedor en ese intervalo; la misma lógica se aplica al resto de los porcentajes:

Los @keyframes: esenciales para crear animaciones en CSS

Los @keyframes no son más que reglas que indican cómo será el comportamiento de los distintos frames o cuadros de toda la animación; son el corazón de las animaciones en CSS. Mozilla Developer Network los define como:

La regla @keyframes permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que deben ser alcanzados en determinados momentos de la misma.

Propiedades de las animaciones en CSS

Ya tenemos definida la animación con @keyframes; sin embargo, usando únicamente esa regla no es posible hacer funcionar la animación. Falta indicar el comportamiento y la personalización de la animación, para lo cual utilizamos las propiedades animation que detallamos a continuación:

Aunque existen muchas más. Una vez definidos los @keyframes, necesitamos indicar cómo se ejecuta la animación. Para eso usamos las propiedades animation.

Las más importantes son:

• animation-name
  • Indica el nombre de la animación definida en @keyframes. Debe coincidir exactamente.
• animation-duration
  • Define cuánto tiempo dura un ciclo completo de la animación (en segundos o milisegundos). Si no se especifica, el valor por defecto es 0s y la animación no se verá.
• animation-iteration-count
  • Especifica cuántas veces se repite la animación. Puede ser un número entero o el valor infinite para que se repita indefinidamente.
• animation-direction
  • Controla el sentido de la animación: normal, reverse, alternate, alternate-reverse.
• animation-delay
  • Indica el tiempo de espera antes de que la animación comience. Muy útil para escalonar múltiples animaciones.
• animation-timing-function
  • Define la curva de velocidad de la animación a lo largo del tiempo. Los valores más comunes son linear, ease, ease-in, ease-out y ease-in-out.
  • En muchos casos, todas estas propiedades se agrupan usando la forma abreviada animation, con el formato: animation: nombre duración timing-function delay iteration-count direction;

Ejemplo de animaciones vs transiciones y algo más

Podemos ver una comparativa entre las animaciones, las transiciones y los cambios sin ningún tipo de efecto. Ubica el cursor por encima de cualquiera de los contenedores <div>:

Además, existen muchas otras propiedades que permiten personalizar aún más el comportamiento final de las animaciones en CSS, las cuales serán tratadas en profundidad en entradas siguientes:

Cómo animar un elemento paso a paso

El proceso mental que suelo seguir es siempre el mismo:

• Decidir qué quiero animar (color, width, transform…).
• Pensar cómo evoluciona esa propiedad en el tiempo.
• Definir los estados clave con @keyframes.
• Ajustar duración, repeticiones y ritmo con las propiedades animation.

Por ejemplo, una animación completa aplicada a un elemento:

.elemento {
 width: 100px;
 height: 100px;
 background: grey;
 animation: cambiar-color 5s infinite;
}

@keyframes cambiar-color {
 from { background: red; }
 to { background: green; }
}

Aquí la animación empieza automáticamente al cargar la página, dura 5 segundos y se repite indefinidamente sin ninguna intervención del usuario.

Por qué las animaciones CSS ofrecen más control que las transiciones

La gran ventaja de las animaciones CSS frente a las transiciones es que permiten:

• Definir múltiples estados intermedios con porcentajes en @keyframes.
• Controlar exactamente cuándo ocurre cada cambio dentro del ciclo.
• Repetir animaciones automáticamente sin necesidad de eventos externos ni JavaScript.

Cuando necesitas algo más que un simple efecto :hover, las animaciones CSS son casi siempre la mejor opción.

Cuándo usar animaciones CSS

Las animaciones CSS son ideales para:

• Indicadores visuales (loaders, spinners, barras de progreso).
• Efectos decorativos (fondos animados, entradas de texto, elementos que pulsan).
• Animaciones automáticas que no dependen de la interacción del usuario.
• Pequeñas interacciones sin lógica compleja de estado.

Si necesitas lógica avanzada o animaciones dependientes de cálculos en tiempo real, JavaScript (o librerías como GSAP) puede ser una mejor herramienta. Pero para la mayoría de los casos habituales, CSS puro es más que suficiente y mucho más performante.

Animando textos y letras con animation-delay en CSS

Como hemos visto en múltiples entradas sobre CSS, esta tecnología nos sirve para prácticamente todo lo que queremos hacer en el front-end. El ejemplo que presento a continuación permite animar textos de forma muy sencilla con muy poco código, pero el efecto conseguido es bastante logrado y te sorprenderá lo fácil que resulta implementarlo.

Muchas veces pasamos por alto estos pequeños detalles que hacen realmente la diferencia. Entrar en una web y ver que todo carga estático puede resultar algo frío, pero unas sencillas animaciones en el texto le dan otro enfoque al sitio, transmitiendo dinamismo y cuidado por el detalle. Se pueden aplicar a nivel de todo el párrafo o letra por letra, según lo que necesites. Aquí te traemos una idea básica para animar tus textos con poco CSS.

El truco es muy sencillo: solo necesitamos unas pocas líneas de CSS y entender bien la propiedad animation-delay.

Animaciones retrasadas en CSS con animation-delay: el gran truco

La clave está en la propiedad animation-delay, que permite retrasar el inicio de la animación de cada letra individualmente, logrando así el efecto escalonado en el texto. Dicho aplazamiento se consigue combinándolo con el selector :nth-child:

.words span:nth-child(2) {
  animation-delay: 0.4s;
}
.words span:nth-child(3) {
  animation-delay: 0.8s;
}
.words span:nth-child(4) {
  animation-delay: 1.3s;
}

La animación en sí es muy sencilla: aplica un desplazamiento horizontal con la propiedad transform:

@keyframes move {
  0% {
    transform: translate(-25%, 0);
  }
  50% {
    text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  }
  100% {
    transform: translate(33%, 0);
  }
}

Otro punto clave es el uso de text-shadow en el fotograma intermedio (50%). Añade una sombra cuando las letras están en movimiento, reforzando el efecto de profundidad y permitiendo que la animación se reinicie limpiamente cuando las letras quedan fuera de vista.

Como ves, es un efecto basado en animaciones CSS que queda realmente bien en cualquier aplicación y que no requiere mucho esfuerzo, solo un poco de ingenio y conocer bien las propiedades disponibles.

Efecto de sombreado sobre el texto con animaciones CSS

En esta otra animación vemos un efecto de texto estilo neón o advertencia luminosa. Se emplea la propiedad text-shadow de CSS en combinación con los @keyframes correspondientes:

El HTML es simplemente el texto dentro de un contenedor <div>:

<div class="area">
  Texto
</div>

El CSS es donde ocurre la magia. Dos puntos clave para que el efecto funcione correctamente: el color del texto debe ser igual al del color de fondo (en este caso blanco), para que el texto "aparezca" solo a través del sombreado; y en la animación se define el text-shadow varias veces con distintas intensidades para que el efecto luminoso sea más pronunciado:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
 background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_net.png') repeat;
  font-family: "Open Sans",  Impact;
}
.area{
  text-align:center;
  font-size:6.5em;
  color:#fff;
  letter-spacing: -7px;
  font-weight:700;
  text-transform:uppercase;
  animation:blur 2s ease-out infinite;
  text-shadow:0px 0px 5px #fff,
      0px 0px 7px #ff0000;
}

@keyframes blur{
  from{
      text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #ff0099,
      0px 0px 150px #ff0099,
      0px 10px 100px #ff0099,
      0px 10px 100px #ff0099,
      0px 10px 100px #ff0099,
      0px 10px 100px #ff0099,
      0px -10px 100px #ff0099,
      0px -10px 100px #ff0099;
	  }
}

Conclusiones sobre las animaciones retrasadas en textos CSS

Hoy en día prácticamente todos los navegadores modernos soportan las animaciones en CSS. Con la cantidad de propiedades disponibles, las posibilidades son casi infinitas. En los ejemplos anteriores solo empleamos unas pocas —animation-delay, text-shadow, transform—; imagina combinarlas con cambios de color, font-size u opacity. El soporte del motor de animaciones en los navegadores modernos está muy maduro y no tendrás problemas para conseguir efectos vistosos en tus textos y letras, tal como vimos en esta sección.

Las curvas de Bézier en las animaciones CSS: caso Google Chrome

Las curvas de Bézier se emplean en todo tipo de programas de procesamiento digital de imágenes como GIMP o Photoshop para el trazado de formas; pero también en programas de modelado y animación 3D como Blender. Y, por supuesto, también tienen su aplicación en CSS.

Aplicado al tema que nos compete: las curvas de Bézier permiten describir en cada fase temporal la velocidad de una animación CSS, a través del valor cubic-bezier(p1x, p1y, p2x, p2y) aplicable a la propiedad animation-timing-function (o transition-timing-function).

Sintaxis de la curva de Bézier en CSS

El valor cubic-bezier(p1x, p1y, p2x, p2y) consta de cuatro puntos que definen la curva de aceleración, como podemos ver a continuación:

Más información sobre las curvas de Bézier en: Bézier curve.

En esta entrada no profundizaremos en la construcción matemática de las curvas de Bézier, pero sí veremos cómo usarlas de forma práctica en CSS.

Valores predefinidos vs cubic-bezier en CSS

En esta sección veremos algunos ejemplos de curvas de Bézier y su equivalente con valores predefinidos en CSS.

(ease) La animación inicia lento, acelera y termina lentamente: cubic-bezier(0.25, 0.1, 0.25, 1):

(linear) La animación mantiene una velocidad constante de principio a fin: cubic-bezier(0, 0, 1, 1):

(ease-in) La animación inicia lento y termina rápido: cubic-bezier(0.42, 0, 1, 1):

(ease-out) La animación inicia rápido y termina lento: cubic-bezier(0, 0, 0.58, 1):

Puedes obtener más información en el siguiente enlace: CSS3 transition-timing-function Property.

Con las curvas de Bézier hay que establecer valores entre 0 y 1 para los ejes X, y en ocasiones puede resultar complicado personalizar el comportamiento sin una ayuda visual. Para estos casos, las herramientas de desarrollo del navegador son tus aliadas.

Google Chrome y las curvas de Bézier en las animaciones CSS

Google Chrome, al igual que otros navegadores modernos, ofrece una cantidad importante de herramientas para desarrolladores que permiten testear y experimentar con las animaciones. Una de las más útiles para trabajar con curvas de Bézier la encontramos directamente en el panel de estilos de las DevTools.

Al seleccionar en las DevTools un elemento que tenga aplicada la propiedad animation-timing-function o transition-timing-function (en nuestro ejemplo, un elemento <span>):

Veremos un pequeño icono en el panel Styles:

Al hacer clic sobre él se abre un panel visual interactivo con la curva actual:

Y al arrastrar los nodos de control podemos alterar la curva de Bézier en tiempo real, viendo al instante cómo afecta a la velocidad de la animación en cada fase:

Esta es, sin duda, una gran herramienta que te permite "jugar" con distintos valores y probar varias combinaciones hasta dar con la curva de Bézier que mejor se adapte a la animación que estás construyendo.

Preguntas frecuentes sobre animaciones CSS

• ¿Es necesario JavaScript para crear animaciones CSS?
  • No. Las animaciones CSS funcionan de forma nativa en el navegador sin necesidad de JavaScript.
• ¿Cuál es la diferencia entre animaciones y transiciones en CSS?
  • Las transiciones solo permiten cambiar entre dos estados y necesitan un disparador. Las animaciones permiten definir múltiples estados intermedios con @keyframes y se ejecutan automáticamente.
• ¿Qué significan los porcentajes en @keyframes?
  • Representan momentos concretos dentro del tiempo total de la animación, no estados visuales independientes.
• ¿Se pueden repetir animaciones infinitamente?
  • Sí, usando animation-iteration-count: infinite.
• ¿Qué propiedad controla la velocidad de una animación CSS?
  • La propiedad animation-timing-function, que acepta valores como ease, linear, ease-in, ease-out, o una curva personalizada con cubic-bezier().

Conclusión

Las animaciones en CSS funcionan definiendo qué cambia, cuándo cambia y durante cuánto tiempo. Los @keyframes marcan los puntos clave de la línea de tiempo y el navegador se encarga de interpolar el resto de forma fluida.

Cuando empiezas a pensar las animaciones como una línea de tiempo —y no como simples cambios de estilo— todo se vuelve mucho más claro, predecible y fácil de depurar.

Veamos más ejemplos prácticos con CSS a continuación.

Experimentos y ejemplos de animaciones CSS para practicar

Te presento una serie de experimentos listos para practicar las animaciones en CSS, ordenados por nivel de dificultad:

• Efecto ripple en CSS
• Múltiples fondos animados con CSS
• Animando cosas con CSS: creando Loaders
• Animando cosas con CSS: Creando una luna
• La pseudo-class :target en CSS para resaltar contenido vinculado mediante enlaces
• ¿Cómo crear un carrusel o slider 3D con HTML5 y CSS?
• Creando un contenedor de luz difuminada con CSS
• Cómo crear un botón de carga (Button Loader Spinner) con animaciones CSS3 y JavaScript