Para que servem os quadros-chave de animação e como eles funcionam?

Os quadros-chave (keyframes) em CSS são usados para definir estados intermédios de uma animação. Permitem especificar como as propriedades de um elemento irão mudar em diferentes momentos durante a animação.

Funcionam assim: descreve-se um conjunto de estilos para certos percentuais de tempo (por exemplo, 0%, 50%, 100%), e o navegador interpola suavemente os valores entre esses estados.

Exemplo:

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

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

Neste exemplo, o elemento aparece suavemente (a opacidade muda de 0 para 1) ao longo de 2 segundos.

Assim, os keyframes permitem criar animações complexas e suaves, definindo pontos-chave de alteração de estilos.