Animaciones CSS: Uso de keyframes con la propiedad animation

Las animaciones CSS se crean mediante la propiedad animation y definiendo secuencias de fotogramas utilizando la regla @keyframes. Con la propiedad animation se pueden realizar animaciones simples, como un parpadeo o un desplazamiento suave, hasta animaciones más elaboradas, como la rotación de objetos o el cambio de color gradual. Estas animaciones no requieren interacción del usuario, ya que pueden ejecutarse automáticamente al cargar la página o repetirse indefinidamente.

En este artículo, veremos en detalle cómo utilizar la propiedad animation en CSS con ejemplos prácticos de su aplicación.

1. Diferencias entre las propiedades animation, transition y transform

En una sección anterior vimos cómo hacer transiciones y transformaciones en CSS3 sobre los elementos de nuestra página web. Veamos las diferencias entre esas dos propiedades y animation.

• La propiedad transition en CSS permite realizar cambios suaves entre dos estados de un elemento cuando ocurre un evento, como pasar el cursor sobre él (:hover). Es ideal para efectos básicos como cambios en el color, tamaño o posición, pero solo anima entre un estado inicial y final, sin pasos intermedios.
• La propiedad transform modifica instantáneamente la apariencia de un elemento, permitiendo rotarlo, escalarlo o moverlo en el espacio. Aunque transform no genera animaciones por sí mismo, puede combinarse con transition o animation para lograr efectos más elaborados.
• La propiedad animation permite definir múltiples estados intermedios en una animación y controlar aspectos como la duración, la repetición y la dirección. A diferencia de transition, las animaciones pueden ejecutarse automáticamente al cargar la página o repetirse indefinidamente sin requerir la interacción del usuario.

2. Animaciones CSS con propiedad animation (propiedad abreviada)

En este apartado veremos cómo encadenar diferentes animaciones utilizando la propiedad animation y sus subpropiedades. Para ello, definiremos la propiedad animation sobre nuestros selectores y después definiremos nuestra secuencia de animación mediante @keyframes.

Cuando trabajamos con animaciones en CSS, podemos optar por usar la propiedad abreviada animation, que incluye todas las configuraciones en una sola línea, o podemos utilizar las subpropiedades de animation de forma individual para tener un mayor control sobre cada aspecto de la animación.

2.1. Sintaxis propiedad animation

La propiedad animation engloba todas las subpropiedades relacionadas con la animación en CSS, por lo que sería la propiedad abreviada. Las subpropiedades permiten controlar aspectos específicos de la animación, como su nombre, duración, dirección, relleno, etc.

selector {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

1. name: Especifica el nombre de la regla @keyframes que describe los fotogramas de la animación.
2. duration: Indica la cantidad de tiempo que la animación consume en completar su ciclo. Se expresa en segundos (s) o milisegundos (ms).
3. timing-function: Define el ritmo de la animación, es decir, cómo se muestran los fotogramas a lo largo del tiempo. Puede ser lineal, ease, ease-in, ease-out, ease-in-out, cubic-bezier, step-start, step-end, steps, etc.
4. delay: Especifica un tiempo de espera antes de que la animación comience a ejecutarse. Se expresa en segundos (s) o milisegundos (ms).
5. iteration-count: Indica el número de veces que se repetirá la animación. Puede ser un número entero, infinite para que se repita infinitamente, o un valor específico como 2, 3, etc.
6. direction: Define si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia. Puede ser normal, reverse, alternate, o alternate-reverse.
7. fill-mode: Especifica qué valores tendrán las propiedades después de finalizar la animación. Puede ser none, forwards, backwards, o both.
8. play-state: Permite pausar y reanudar la secuencia de la animación. Puede ser running o paused.

2.2. Subpropiedades de animation

Si optamos por usar las subpropiedades, comenzamos añadiendo la propiedad animation-name al selector, a la cual le asignamos un nombre identificativo, denominado identifier. Luego, podemos utilizar las demás subpropiedades para ajustar diferentes aspectos de la animación, como la duración, dirección, entre otros.

Sintaxis:

selector{
      animation-name: identifier;
      subproperty: value;
}

Las subpropiedades de animation son:

• animation-nameEspecifica el nombre de la regla @keyframes que describe los fotogramas de la animación.
• animation-delayTiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
• animation-directionIndica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia.
• animation-durationIndica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
• animation-iteration-countEl número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
• animation-play-statePermite pausar y reanudar la secuencia de la animación.
• animation-timing-functionIndica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
• animation-fill-modeEspecifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).

2.3. Valores de las subpropiedades de animation

Veamos los posibles valores de las subpropiedades de animation y ejemplos de uso:

• animation-name
  Esta subpropiedad vincula el selector con una regla @keyframes. Los identificadores o nombres que utilizamos deben ser únicos.

   .mi-elemento {
     animation-name: mi-animacion;
   }

   @keyframes mi-animacion {
     from { opacity: 0; }
     to { opacity: 1; }
   }

• animation-delay
  Determina un tiempo de espera antes de que la animación comience.

   .mi-elemento {
     animation-delay: 500ms; /* Espera medio segundo antes de comenzar */
   }

• animation-direction
  Indica si la animación debe alternar la dirección en cada ciclo.
  Valores: normal, reverse, alternate, alternate-reverse.

   .mi-elemento {
     animation-direction: alternate; /* Va y viene */
   }

• animation-duration
  Establece cuánto tiempo tarda en completar un ciclo de la animación, se expresa en segundos (s) o milisegundos (ms).

   .mi-elemento {
     animation-duration: 2s; /* Completa la animación en 2 segundos */
   }

• animation-iteration-count
  Define cuántas veces se repetirá la animación. infinite para una animación sin fin.

   .mi-elemento {
     animation-iteration-count: infinite; /* Repite la animación indefinidamente */
   }

• animation-play-state
  Permite pausar y reanudar la reproducción de la animación.
  Valores: running, paused.

   .mi-elemento:hover {
     animation-play-state: paused; /* Pausa la animación al pasar el mouse */
   }

• animation-timing-function
  Controla el ritmo de la animación, definiendo cómo se acelera y desacelera durante su ejecución.
  Valores: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n).

   .mi-elemento {
     animation-timing-function: ease-in-out; /* Comienza lentamente, se acelera en el medio, y termina lentamente */
   }

• animation-fill-mode
  Decide los estilos que se aplican a un elemento antes y después de su animación.
  Valores: none, forwards, backwards, both.

   .mi-elemento {
     animation-fill-mode: forwards; /* Mantiene los estilos del último keyframe después de finalizar */
   }

3. Animaciones CSS: Uso de @keyframes

Una vez añadida la propiedad animation a nuestro selector, haremos uso de los @keyframes para crear animaciones completas.

Los @keyframes son un conjunto de fotogramas clave que describen cómo se muestra cada elemento animado durante la secuencia de la animación. La sintaxis es la siguiente:

@keyframes identifier {
  from {
      ...
  }
  percentage {
      ...
  }
  to {
      ...
  }
}

• identifier Nombre que identifica la lista de keyframe. Debe coincidir con animation-name.
• fromDesde (por ejemplo: desde 0%).
• toHasta (por ejemplo hasta 100%).
• percentage Porcentaje intermedio de las veces que va a ocurrir una animación.

Ver descripción completa de propiedades

4. Ejemplos animaciones CSS con propiedad animation

Veamos mejor las propiedades y valores explicados anteriormente mediante varios ejemplos.

4.1. Rotación de forma indefinida

Vamos a hacer una animación mediante @keyframes de nuestro logo, de forma que se encuentre rotando de forma indefinida. Para ello vamos a utilizar la propiedad transform y le daremos varios valores a su rotación: crearemos una animación con tres keyframes: uno inicial que tendrá rotación de 0 grados, otro en el 50% que tendrá una rotación sobre el eje y de 180 grados y uno final que volverá a tener una rotación de 0 grados.

Código html:

<img class="animacionLogo" src="eniun.png">

Código CSS:

.animacionLogo {
     animation-duration: 5s;
     animation-name: animLogo;
     animation-iteration-count: infinite;
   }
 @keyframes animLogo{
     from {
         -webkit-transform: rotate(0deg);
         transform: rotateY(0deg);
     }
     50%{
         -webkit-transform: rotate(180deg);
         transform: rotateY(180deg);
     } to {
         -webkit-transform: rotate(360deg);
         transform: rotateY(360deg);
         }
 }

Ejemplo completo en CodePen:

4.2. Deslizar un texto por el navegador

Ahora haremos una animación de un párrafo que se deslizará por el navegador desde el borde derecho de la ventana:

Código CSS:

p {
   animation-duration: 4s;
   animation-name: animTexto;
   margin: 20px;
 }
 @keyframes animTexto {
   from {
     margin-left: 100%;
     width: 100%;
   }
   to {
     margin-left: 0%;
     width: 100%;
   }
 }

Ejemplo completo en CodePen:

.

4.3. Animación de una pelota botando

Veamos un ejemplo de una animación que simula una pelota botando. En esta animación, la .bouncing-ball comienza en su posición original, se traslada 100 píxeles hacia arriba y luego vuelve a caer. La animación tiene una duración de 2 segundos y se repite infinitamente. Los animation-timing-function de ease-in y ease-out se aplican en los puntos clave para simular la aceleración y desaceleración de la pelota al rebotar.

Puedes ajustar la altura del rebote (translateY(-100px)) y la duración de la animación para cambiar la apariencia del rebote. La forma redondeada de la pelota se logra con border-radius: 50%.

Código CSS:

.bouncing-ball {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  animation-name: bouncing;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  margin: 100px auto;
}

@keyframes bouncing {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateY(-100px);
    animation-timing-function: ease-out;
  }
}

Ejemplo completo en CodePen:

4.4. Animación de una rueda girando

A continuación se muestra un ejemplo de cómo crear una animación de una rueda girando usando CSS y la propiedad animation. Esta animación hace que el elemento .spinning-wheel gire continuamente. La rueda es representada por un div circular con un borde sólido y un border-top-color transparente para dar la apariencia de una rueda. La animación spin rota la rueda 360 grados indefinidamente. El tiempo de duración de la rotación es de 2 segundos y linear asegura que la velocidad de la animación sea constante.

Puedes ajustar el tamaño de la rueda, el grosor del borde y la duración de la animación para personalizar la apariencia y el comportamiento de la rueda giratoria.

Código CSS:

.spinning-wheel {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #3498db;
  border-top-color: transparent;
  animation-name: spin;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Ejemplo completo en CodePen:

4.5. Animación de un indicador de carga

Veamos una animación que simule un indicador de carga que aumenta de tamaño y cambia de color durante la animación. La animación se ejecuta con una duración de 2 segundos, tiene un retraso de 0.5 segundos antes de iniciar y se repite infinitamente. Además, alterna la dirección en cada iteración y utiliza la función de tiempo ease-in-out para una transición suave. Finalmente, la propiedad animation-fill-mode con el valor both asegura que el círculo mantenga el estado final después de completar la animación.

Código CSS:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f5f5f5;
}

.loading-indicator {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  animation-name: scaleAndColorChange;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

@keyframes scaleAndColorChange {
  0% {
    transform: scale(1);
    background-color: blue;
  }
  100% {
    transform: scale(2);
    background-color: green;
  }
}

Ejemplo completo en CodePen:

4.6. Animación de un latido de corazón

Veamos un ejemplo de una animación de «latido del corazón» que puede ser útil para resaltar elementos interactivos como botones de donación, alertas importantes o cualquier elemento que desees destacar en tu página web.

Código CSS:

.heart-beat {
  font-size: 50px;
  color: red;
  text-align: center;
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Ejemplo completo en CodePen:

Comprueba tu apendizaje

Ejercicio propuesto

Configura diferentes animaciones en alguno de los elementos de tu proyecto web. Por ejemplo, podrías hacer que alguno de los textos e imágenes se muevan desde la derecha de la pantalla del navegador hasta su posición base cuando se recarga la pantalla. También podrías hacer que algún elemento modifique su tamaño y su posición durante un determinado tiempo, etc.