Cómo funciona la línea de tiempo
Un tren que no puede saltarse estaciones
Piensa en la línea de tiempo de una animación como en una vía de tren. El tren sale de la estación cero (0%) y debe llegar a la estación final (100%). En el camino, puedes construir tantas estaciones intermedias como quieras: 25%, 50%, 75%. El tren siempre pasa por cada estación en el orden correcto, y entre cada par de estaciones viaja a una velocidad que tú controlas.
Cuando defines animation-duration: 4s, estás diciéndole al navegador que el trayecto completo —de 0% a 100%— debe durar exactamente cuatro segundos. Así, el 25% ocurre al segundo uno, el 50% al segundo dos. El tiempo total se divide de forma proporcional en función de los porcentajes que definas.
Los extremos: inicio y final
El 0% y el 100% son los pilares fundamentales de tu línea de tiempo. Si omites el 0%, el navegador tomará como punto de partida los estilos actuales del elemento —y si esos estilos no coinciden con lo que esperabas, verás un salto brusco en el primer fotograma. Definir siempre ambos extremos explícitamente es una práctica que elimina sorpresas desagradables.
El secreto que nadie te cuenta: la interpolación
La interpolación es el proceso matemático por el que el navegador calcula todos los valores que existen entre los keyframes que tú definiste. Si a 0% la opacidad es 0 y a 100% es 1, el navegador calcula 0.1, 0.2, 0.3... 0.9 —cada uno asignado al fotograma correspondiente en esa fracción de segundo— y los pinta en pantalla a 60 fotogramas por segundo.
Este es el trabajo invisible que el navegador hace por ti, y es el que convierte tus estados estáticos en una ilusión de movimiento vivo.
El timing-function actúa tramo a tramo
Aquí viene algo que sorprende a muchos desarrolladores: la función de aceleración (easing) no se aplica a toda la animación como un bloque, sino individualmente entre cada par de keyframes adyacentes. Esto significa que puedes hacer que el elemento acelere rápido del 0% al 50%, y luego desacelere suavemente del 50% al 100%, simplemente definiendo distintos timing-functions dentro de cada fotograma clave.
Consejo profesional
Recuerda que las funciones de aceleración (easing) actúan entre cada intervalo. Si pasas de 0% a 50% y luego a 100%, el easing se aplicará del 0% al 50%, y se reiniciará del 50% al 100%.
Ejemplo práctico
<div class="timeline-container">
<div class="timeline-dot"></div>
</div>Una esfera que avanza por una pista y cambia su forma, color y escala en checkpoints específicos de la línea de tiempo.
Errores comunes
Practica lo aprendido
Define una línea de tiempo que haga rebotar un elemento en cuatro fases de altura distintas.