¿Para qué sirven los keyframes y cómo funcionan?

@keyframes — regla CSS que define los fotogramas clave de una animación. Permite crear una secuencia de estados de un elemento en diferentes momentos del tiempo, que el navegador irá interpolando suavemente, creando un efecto de movimiento. Funciona mediante la definición de un conjunto de estilos para el elemento en ciertos porcentajes de tiempo (del 0% al 100%) o usando las palabras clave from (0%) y to (100%).

Para usar keyframes es necesario:

1. Definir la regla @keyframes con un nombre único.
2. Dentro de @keyframes, especificar estilos para diferentes marcas de tiempo (en porcentajes o from/to).
3. Aplicar la animación creada al elemento usando la propiedad CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Estado inicial: sin desplazamiento en X
  }

  to {
    transform: translateX(100%); // Estado final: desplazamiento al 100% en X
  }
}

.element {
  animation-name: slidein; // Nombre de la animación definido arriba
  animation-duration: 3s; // Duración de la animación
  animation-timing-function: ease-in-out; // Función de velocidad de la animación
  animation-delay: 1s; // Retardo antes de comenzar la animación
  animation-iteration-count: infinite; // Número de repeticiones (aquí infinito)
  animation-direction: alternate; // Dirección de la animación (normal, luego inversa)
}

Propiedades principales de animation, usadas junto con @keyframes:

Propiedad	Descripción
animation-name	Nombre de @keyframes a aplicar.
animation-duration	Duración de un ciclo de la animación (por ejemplo, 2s, 500ms).
animation-timing-function	Función de velocidad de la animación (por ejemplo, linear, ease, ease-in, cubic-bezier).
animation-delay	Retardo antes de comenzar la animación (por ejemplo, 1s).
animation-iteration-count	Número de repeticiones de la animación (infinite para repetir indefinidamente).
animation-direction	Dirección de la animación (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Define qué estilos se aplican al elemento antes y después de la animación.
animation-play-state	Define si la animación está en ejecución o en pausa.