¿Qué son los keyframes en animación?

Valor y momento. Con esos dos datos se describe cualquier movimiento en una línea de tiempo, y por eso la pregunta sobre qué son los keyframes en animación se responde mejor con aritmética que con metáforas.

Un keyframe es exactamente esa anotación. Todo lo demás —la suavidad, el rebote, la sensación de peso— sale de cómo se rellenan los huecos entre un punto y el siguiente. La idea no es nueva y sigue igual; lo que ha cambiado es dónde se ejecuta el cálculo, antes en una estación de trabajo dedicada y hoy en la pestaña de un navegador junto al resto de la interfaz.

Definición corta y sin metáforas

Un keyframe registra el valor de una propiedad en un momento determinado de la línea de tiempo. Dos keyframes del mismo valor no producen movimiento; dos keyframes con valores distintos, sí. Uno solo tampoco anima: deja la propiedad congelada.

La consecuencia práctica es que los keyframes no se ponen en las capas, se ponen en las propiedades. Una capa de texto puede tener veinte propiedades y solo dos animadas. Cuando alguien dice que «animó una capa», en realidad eligió una propiedad de esa capa y la movió en el tiempo.

Cómo se rellena el hueco entre dos puntos

En el caso más simple, el programa reparte la diferencia de forma proporcional. Si una propiedad vale 0 en el segundo 0 y 100 en el segundo 2, con interpolación lineal el valor en el segundo 1 es 0 + (100 − 0) × (1 ÷ 2) = 50, y en el segundo 1,5 es 0 + 100 × (1,5 ÷ 2) = 75.

Esa proporción es la que hace legible cualquier movimiento: la mitad del tiempo, la mitad del recorrido. Y también la que explica el problema del apartado siguiente.

Easing, la curva que reparte el tiempo

La interpolación lineal avanza a velocidad constante, y nada en el mundo real arranca y se detiene así. El easing es una función de tiempo añadida al cálculo, casi siempre una curva de Bézier cúbica, que decide cuánto valor corresponde a cada instante.

Con una curva de entrada y salida suave, el primer tramo recorre poca distancia y el central mucha. El objeto parece tener masa. El número de keyframes sigue siendo dos; lo que cambia es el reparto del tiempo entre ellos.

En el archivo que sale del editor esa información viaja también. Un Lottie guarda los manejadores Bézier de entrada y salida de cada tramo y, cuando el valor no debe interpolarse, una marca de retención que lo mantiene fijo hasta el keyframe siguiente.

El tiempo se mide en fotogramas

La línea de tiempo no trabaja con segundos decimales, trabaja con fotogramas. A 24 fotogramas por segundo, una retención de 2 fotogramas dura 2 ÷ 24 = 0,083 segundos, y esa cifra es la que decide si un cambio se percibe o pasa desapercibido.

La velocidad de fotogramas de la composición no es un detalle de exportación: define la rejilla sobre la que se colocan los keyframes. A 30 fps, dos segundos son 60 fotogramas; a 60 fps, son 120. El mismo movimiento, la misma duración y el doble de resolución temporal para colocar puntos.

Existe una alternativa a poner otro keyframe: las expresiones. El editor las admite, así que un valor puede calcularse a partir de otro —una rotación que sigue a la posición, una opacidad que depende del tiempo— sin añadir puntos a mano.

Errores frecuentes y límites

• Confundir keyframes con capas. Se anima una propiedad, y una capa tiene muchas.
• Suponer que más keyframes equivalen a más suavidad. La suavidad la da el easing; el exceso de puntos solo hace el movimiento difícil de ajustar.
• Mezclar retención e interpolación en el mismo tramo. El resultado es un salto visible que no se arregla moviendo el punto.
• Trasladar la lógica de las animaciones CSS sin más. Las dos usan fotogramas clave como idea, pero son mecanismos distintos y no se sustituyen entre sí sin rehacer el trabajo.
• Olvidar que un keyframe guarda un valor en una unidad concreta. Cambiar la escala del lienzo después no reajusta los valores ya escritos.

Dónde verlo funcionando

El editor de motion graphics y VFX muestra todo esto en pantalla: keyframes en la línea de tiempo, editor de curvas para el easing, expresiones y cola de render. La guía sobre crear motion graphics con keyframes convierte estos conceptos en un flujo de trabajo completo. Y si el destino del movimiento es una interfaz, el artículo sobre qué es un archivo Lottie explica cómo se empaqueta ese tiempo en un archivo de texto.

Entender el keyframe como un par de datos evita la mitad de los problemas de animación. El resto es decidir qué valor toca en cada momento y con qué curva llega.