¿Cuáles son las propiedades principales para controlar una animación CSS?

Para controlar las animaciones CSS, primero necesitas definir la secuencia de la animación utilizando la regla @keyframes, que establece los estilos en diferentes puntos (o porcentajes) de la duración de la animación. Una vez definida, aplicas y controlas esta animación a un elemento HTML mediante un conjunto de propiedades animation-*.

1. animation-name: Especifica el nombre de la regla @keyframes que quieres aplicar al elemento. Este nombre es el que le diste al definir tus @keyframes.
2. animation-duration: Define la duración de un solo ciclo de la animación. Es un valor de tiempo, por ejemplo, 2s (segundos) o 500ms (milisegundos). Esta propiedad es fundamental.
3. animation-timing-function: Describe cómo progresa la animación entre los fotogramas clave, es decir, su curva de aceleración. Los valores son los mismos que para transition-timing-function (ej. linear, ease, ease-in, ease-out, ease-in-out, steps(), o una cubic-bezier() personalizada).
4. animation-delay: Especifica un retraso antes de que la animación comience. También es un valor de tiempo.
5. animation-iteration-count: Indica cuántas veces se debe repetir el ciclo de la animación. Puede ser un número (ej. 3) o la palabra clave infinite para que se repita indefinidamente.
6. animation-direction: Define si la animación debe reproducirse en orden normal, inverso, o alternar entre ambos en ciclos sucesivos. Los valores comunes son:
   • normal (por defecto): Se reproduce hacia adelante.
   • reverse: Se reproduce hacia atrás.
   • alternate: En la primera iteración va hacia adelante, en la segunda hacia atrás, y así sucesivamente.
   • alternate-reverse: En la primera iteración va hacia atrás, en la segunda hacia adelante, etc.
7. animation-fill-mode: Configura qué estilos se aplican al elemento antes de que comience la animación o después de que termine (cuando no está activa). Los valores comunes son none (por defecto), forwards (mantiene los estilos del último fotograma clave al terminar), backwards (aplica los estilos del primer fotograma clave durante el animation-delay), y both (aplica ambas reglas).
8. animation-play-state: Permite pausar (paused) o reanudar (running) una animación. Esto es útil para controlar animaciones mediante JavaScript o interacciones del usuario.

Ejemplo conceptual:

/* 1. Definir la animación con @keyframes */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Aplicar y controlar la animación en un elemento */
.mi-elemento-animado {
  animation-name: fadeInSlide;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; /* Aplica estado 'from' durante el delay, si lo hubiera */
  /* Podríamos añadir: animation-iteration-count, animation-delay, etc. */
}
Lenguaje del código: PHP (php)