Para que servem os keyframes e como funcionam?

@keyframes — regra CSS que define os quadros-chave de uma animação. Permite criar uma sequência de estados de um elemento em diferentes momentos do tempo, que o navegador irá interpolar suavemente, criando um efeito de movimento. Funciona através da definição de um conjunto de estilos para o elemento em certos percentuais de tempo (de 0% a 100%) ou usando as palavras-chave from (0%) e to (100%).

Para usar keyframes é necessário:

1. Definir a regra @keyframes com um nome único.
2. Dentro de @keyframes, especificar estilos para diferentes marcas de tempo (em percentuais ou from/to).
3. Aplicar a animação criada ao elemento usando a propriedade CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Estado inicial: sem deslocamento em X
  }

  to {
    transform: translateX(100%); // Estado final: deslocamento a 100% em X
  }
}

.element {
  animation-name: slidein; // Nome da animação definido acima
  animation-duration: 3s; // Duração da animação
  animation-timing-function: ease-in-out; // Função de velocidade da animação
  animation-delay: 1s; // Retardo antes de começar a animação
  animation-iteration-count: infinite; // Número de repetições (aqui infinito)
  animation-direction: alternate; // Direção da animação (direto, depois inverso)
}

Propriedades principais de animation, usadas junto com @keyframes:

Propriedade	Descrição
animation-name	Nome de @keyframes a aplicar.
animation-duration	Duração de um ciclo de animação (por exemplo, 2s, 500ms).
animation-timing-function	Função de velocidade da animação (por exemplo, linear, ease, ease-in, cubic-bezier).
animation-delay	Retardo antes de começar a animação (por exemplo, 1s).
animation-iteration-count	Número de repetições da animação (infinite para repetir indefinidamente).
animation-direction	Direção da animação (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Define quais estilos são aplicados ao elemento antes e depois da animação.
animation-play-state	Define se a animação está em execução ou em pausa.