¿Cómo hacer que una animación CSS se ejecute en bucle o un número específico de veces?

Puedes controlar con precisión cuántas veces se ejecuta una animación CSS, ya sea un número específico de veces o en un bucle infinito. Esto se logra principalmente mediante la propiedad animation-iteration-count.

Esta propiedad se aplica al elemento que está siendo animado y acepta los siguientes tipos de valores:

1. Un número (number):
   Si especificas un valor numérico entero positivo (por ejemplo, 1, 2, 3, 10), la animación se repetirá ese número exacto de veces. El valor por defecto de animation-iteration-count es 1, lo que significa que la animación se ejecuta una sola vez si no se especifica lo contrario.
2. La palabra clave infinite:
   Si quieres que la animación se repita continuamente sin detenerse (en un bucle infinito), utilizas el valor infinite.

Cómo se aplicaría, asumiendo que ya tienes una animación definida con @keyframes:

/* Primero, definimos una animación de ejemplo */
@keyframes latido {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotacionContinua {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ahora, aplicamos la animación a los elementos */

.icono-notificacion {
  animation-name: latido;
  animation-duration: 0.8s;
  /* La animación 'latido' se ejecutará 3 veces */
  animation-iteration-count: 3;
  animation-timing-function: ease-in-out;
}

.spinner-de-carga {
  width: 50px;
  height: 50px;
  border: 5px solid lightgray;
  border-top-color: blue;
  border-radius: 50%;

  animation-name: rotacionContinua;
  animation-duration: 1s;
  /* La animación 'rotacionContinua' se ejecutará en bucle infinito */
  animation-iteration-count: infinite;
  animation-timing-function: linear; /* Para una rotación suave y constante */
}Lenguaje del código: PHP (php)