Hoy en día existen muchas webs que tienen algún tipo de interactividad, es decir, reaccionan al usuario, por ejemplo al pulsar un botón, arrastrar con el ratón, hacer scroll o incluso al hacer hover (al situar el puntero sobre el elemento) sobre un elemento.

Para que este tipo de acciones sean más fluidas lo que se suele hacer es meter transiciones entre los distintos estilos para que no se vean saltos bruscos.

Por ejemplo, algo que se suele hacer mucho en el mundo Frontend (y que recomiendo), es añadir una pequeña transición al hacer hover sobre un botón, ya que normalmente éste cambia de color y queda mucho mejor si lo hace de forma gradual.

Antes de continuar tienes que saber que en CSS existen dos tipos de animaciones, una son las transiciones, es decir, el cambio gradual entre estilos, y las propias animaciones, que normalmente implican una secuencia de estados y de estilos.

He decidido crear mezclar en un solo artículo las transiciones y las animaciones porque me da la sensación de que muchas de las animaciones que tenemos pensadas para una web son en realidad transiciones, por lo que es bueno conocer ambas.

También tienes que saber que las animaciones CSS tienen mejor rendimiento que cualquier animación en Javascript, ya que el navegador optimiza la animación y normalmente tienen poca carga de procesador.

Transiciones entre estilos

Estas son las animaciones más simples, sirve para crear una transición gradual entre dos estilos CSS.

La idea es simple, coger un elemento del DOM (cualquiera vale), por ejemplo un botón, aplicar determinados estilos CSS y llegado el punto sobreescribirlos, ya sea con una clase dinámica o con algún selector que los active y desactive como el de :hover.

Vamos a ver el ejemplo del :hover porque es lo más sencillo para empezar. Empecemos por el HTML, un botón con una clase, nada complicado.

<button class="custom-button"></button>

Y ahora el CSS, que en este caso simplemente cambia el color del botón cuando se hace hover con el ratón:

.custom-button {
  border: none;
  padding: 12px 24px;
  background-color: cyan;
}
.custom-button:hover {
  background-color: lightblue;
}

Si ahora pruebas a pasar el ratón por encima del botón verás que el cambio entre colores es brusco. Aquí es donde viene el tema de las transiciones para hacerlo gradual:

.custom-button {
  border: none;
  padding: 12px 24px;
  background-color: cyan;
  transition: background-color 0.5s;
}
.custom-button:hover {
  background-color: lightblue;
}

Así de sencillo. Primero se pone la propiedad transition en el elemento, y su valor es la propiedad CSS que se quiere animar y el tiempo a aplicar el cambio de forma gradual. En el ejemplo he puesto 0.5s para que se note, pero puedes poner el tiempo que quieras, por ejemplo para animaciones de hover yo suelo poner unos 0.2s.

Si por lo que sea quieres hacer una transición de varias propiedades puedes hacerlo usando la coma, es decir, por ejemplo:

.container {
  transition: width 2s, height 4s;
}

Incluso se pueden animar a la vez todas las propiedades, con el valor all, pero yo no lo recomiendo, mejor ser selectivo y transicionar solo las propiedades necesarias, así el navegador sabe qué elementos se van a mover para hacer mejoras de rendimiento.

Sistema de easing

En los ejemplos de antes hemos aplicado el tiempo de duración de la transición en segundos, pero eso no quiere decir que la transición se reproduzca a una velocidad constante.

A lo de que la animación acelere o desacelere y no vaya a una velocidad constante se conoce como easing. De hecho, si no indicas el tipo de curva de aceleración que tiene, por defecto se asigna la del valor ease.

Es decir, escribir esto:

transition: background-color 0.5s;

Es equivalente a poner:

transition: background-color 0.5s ease;

Pero hay más valores de curvas que puedes poner:

  • ease: La transición se empieza a acelerar cuando llega a la mitad y hacia el final se ralentiza.
  • linear: La velocidad de la transición se mantiene constante durante todo el tiempo
  • ease-in: La transición empieza más lenta y se acelera hacia el final
  • ease-out: La contraria a la anterior, empieza rápido y poco a poco va desacelerando.
  • ease-in-out: La transición empieza lenta, se acelera a la mitad y se vuelve a desacelerar.
  • cubic-bezier(): Este valor es una función a la que le tienes que pasar 4 números y que te permite crear tu propia curva para la transición.

Representación gráfica en forma de curva lineal de las distintas funciones de easing de CSS

Por ejemplo para aplicar una transición con curva ease-in-out para la propiedad transform:

transition: transform 1s ease-in-out;

Si esto de las curvas y los easing de las transiciones te cuesta verlo te recomiendo que le eches un ojo a este comparador de curvas easing y beizer en CSS.

Sistema nativo de animaciones

Las animaciones se suelen confundir con las transiciones pero no son lo mismo. Las transiciones son más simples, sirven para hacer cambios graduales entre propiedades CSS y se ejecutan una sola vez cuando la propiedad cambia.

Las animaciones por su parte pueden ser más complejas, puedes definir cada paso de la animación y qué propiedades CSS va a cambiar, se pueden poner en bucle para que siempre se repitan, se pueden ejecutar en sentido contrario, etc.

Para crear una animación lo primero que tienes que hacer es escribir @keyframes más el nombre que le quieras dar a la animación, y dentro de llaves la definición de cada paso de la animación, ejemplo:

@keyframes color-change {
  from { background-color: cyan; }
  to { background-color: orange; }
}

Pero ojo, con esto se define la animación, pero ahora hay que aplicarla, para ello se define la propiedad animation dentro del elemento que quieras, en este caso añado el valor de infinite para que la animación se repita constantemente.

.container {
  animation: color-change 5s infinite;
}

Aquí lo que ocurre es que el elemento al que hemos aplicado la animación empieza a cambiar de color, cuando llega a los 5 segundos se resetea y vuelve al estado inicial. Si lo que quieres es que cuando llegue al final se reproduzca en sentido inverso puedes añadir el valor alternate:

.container {
  animation: color-change 5s infinite alternate;
}

También tienes que saber que puedes definir los pasos de la animación en porcentaje, e incluso añadir varias propiedades, por ejemplo:

@keyframes pulse {
  0% {
    background-color: cyan;
    opacity: 1;
  }
  25% {
    background-color: lightblue;
    opacity: 0.7;
  }
  50% {
    background-color: green;
    opacity: 0.7;
  }
  100% {
    background-color: yellow;
    opacity: 1;
  }
}

Otras propiedades de las animaciones

  • animation-duration: El tiempo que tarda una animación en completase
  • animation-iteration-count: El número de veces que se va a ejecutar la animación
  • animation-direction: La dirección de la animación, por si quieres ejecutarla en sentido inverso.
  • animation-timing-function: La función de easing a usar a la animación, por ejemplo: linear, ease-in...
  • animation-delay: Tiempo que va a esperar la animación en ser ejecutada.
  • animation-play-state: Para pausar y reproducir la animación
  • animation-fill-mode: Para poder definir los valores a usar antes y después de ejecutar la animación.