¿Para qué sirven los fotogramas clave de animación y cómo funcionan?

Las fotogramas clave (keyframes) en CSS se utilizan para definir estados intermedios de una animación. Permiten especificar cómo cambiarán las propiedades de un elemento en diferentes momentos durante la animación.

Funcionan así: describes un conjunto de estilos para ciertos porcentajes de tiempo (por ejemplo, 0%, 50%, 100%), y el navegador interpola suavemente los valores entre estos estados.

Ejemplo:

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

En este ejemplo, el elemento aparece suavemente (la opacidad cambia de 0 a 1 en 2 segundos).

De esta manera, los keyframes permiten crear animaciones complejas y suaves, estableciendo puntos clave en la modificación de estilos.