¿Cómo se definen animaciones complejas en CSS utilizando la regla @keyframes?

Para definir animaciones complejas en CSS, la pieza central es la regla @keyframes. Esta regla te permite controlar la secuencia de una animación dividiéndola en «fotogramas clave» (o puntos intermedios) a lo largo de su duración. En cada fotograma clave, puedes especificar el conjunto de propiedades CSS que el elemento animado debe tener en ese momento particular.

Así es como se estructura y utiliza:

1. Declaración de @keyframes:
   Primero, defines la animación dándole un nombre único. Este nombre se usará luego para aplicar la animación a los elementos HTML.
   @keyframes nombreDeMiAnimacion {
/* Aquí van los fotogramas clave */
}
2. Definición de los Fotogramas Clave (Keyframes):
   Dentro de las llaves de la regla @keyframes, especificas los diferentes estados de la animación utilizando porcentajes que van desde 0% (el inicio de la animación) hasta 100% (el final de la animación).
   • 0% también se puede escribir como la palabra clave from.
   • 100% también se puede escribir como la palabra clave to.
   Para cada porcentaje (o from/to), defines un bloque de declaraciones CSS que describe cómo debe verse el elemento en ese punto específico del ciclo de la animación.

Creando Complejidad:

La «complejidad» de una animación se logra al:

• Utilizar múltiples fotogramas clave intermedios (no solo 0% y 100%, sino también, por ejemplo, 25%, 50%, 75%, etc.).
• Animar múltiples propiedades CSS simultáneamente en cada fotograma clave.
• Combinar diferentes valores para estas propiedades a lo largo de la secuencia.

Ejemplo de una animación con varios pasos:

Imaginemos una animación que hace que un elemento cambie de color, se mueva y cambie su opacidad:

@keyframes efectoDinamico {
  0% { /* Estado inicial */
    background-color: red;
    transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
  25% {
    background-color: yellow;
    transform: translateX(50px) rotate(45deg);
    opacity: 0.7;
  }
  50% {
    background-color: green;
    transform: translateX(100px) rotate(90deg);
    opacity: 0.5;
  }
  75% {
    background-color: blue;
    transform: translateX(50px) rotate(45deg);
    opacity: 0.7;
  }
  100% { /* Estado final (vuelve al inicio en este caso) */
    background-color: red;
    transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
}Lenguaje del código: PHP (php)

Una vez definida esta regla @keyframes llamada efectoDinamico, la aplicarías a un elemento HTML utilizando las propiedades animation-* (como animation-name: efectoDinamico; animation-duration: 4s; animation-iteration-count: infinite; etc.) para controlar cómo y cuándo se ejecuta.

Cuantos más fotogramas clave definas y más propiedades animes, más detallada y compleja puede ser la secuencia de animación.