¿Qué son los Keyframes?

Imagina que estás en un set de animación

Antes de que existiera el cine digital, los animadores dibujaban miles de fotogramas a mano. Pero no todos los fotogramas eran iguales: los más experimentados se encargaban de dibujar los momentos decisivos —el inicio del salto, el punto más alto, el aterrizaje— y luego asistentes dibujaban los marcos intermedios. Esos momentos decisivos se llamaron keyframes, fotogramas clave.

CSS funciona exactamente igual. Tú describes los momentos importantes —cómo luce el elemento al inicio, a la mitad, al final— y el navegador calcula automáticamente todo lo que ocurre entre esos puntos. Ese proceso se llama interpolación, y es lo que convierte una serie de estados estáticos en movimiento fluido.

¿Qué pasaría si no existieran los keyframes?

Antes de CSS Animations, animar elementos en la web requería JavaScript puro: calcular posiciones frame a frame, gestionar intervalos de tiempo, y rezar para que la animación no tartamudeara en navegadores lentos. Era código frágil, difícil de mantener y con un impacto brutal en el rendimiento.

Los keyframes llegaron para que puedas describir lo que quieres, no programar cómo lograrlo. Declaras los estados clave y el navegador —que tiene acceso directo a la GPU del dispositivo— se encarga de renderizarlo a 60 fotogramas por segundo.

El modelo mental correcto

Piensa en un keyframe como un checkpoint en el tiempo. Le dices al navegador: "Al 0% de la duración de la animación, el elemento luce así. Al 50%, luce asá. Al 100%, termina de esta forma." El navegador conecta esos puntos con una transición fluida.

Cada bloque @keyframes necesita como mínimo un nombre único que tú eliges, y al menos dos estados (el inicio con 0% o from, y el final con 100% o to). Con eso es suficiente para crear tu primera animación. Todo lo demás —duración, repetición, easing— lo controlas desde el selector CSS del elemento.

Vocabulario esencial de esta lección

• ✦ @keyframes: La regla CSS que actúa como contenedor de todos los fotogramas clave de una animación.
• ✦ Nombre de animación: El identificador que usarás para vincular los keyframes a un elemento. Tú lo inventas: fadeIn, slide-up, pulsarHero.
• ✦ Porcentajes (0%–100%): Representan momentos dentro de la duración total. Si la animación dura 4 segundos, el 25% ocurre exactamente al segundo 1.
• ✦ from / to: Sinónimos de 0% y 100%. Perfectos cuando tu animación solo tiene estado inicial y final.