Múltiples Keyframes

Cuando dos estados no son suficientes

Piensa en cómo cae una pelota al suelo. No simplemente aparece abajo: acelera mientras baja, impacta la superficie, se aplasta brevemente, vuelve a subir un poco, y finalmente se detiene. Eso no es dos estados. Eso es una historia con al menos cuatro o cinco momentos distintos.

La mayoría de los efectos visuales que se sienten reales y satisfactorios tienen algo en común: narran una historia a través de múltiples checkpoints. Con solo from y to, puedes hacer que algo aparezca o desaparezca. Pero con múltiples keyframes, puedes hacer que el usuario sienta algo.

El efecto rebote: física simulada en CSS

El rebote clásico respeta las leyes de la física: el objeto acelera hacia abajo por la gravedad, impacta la superficie con energía cinética —y esa energía lo deforma brevemente antes de rebotarlo hacia arriba, perdiendo energía con cada ciclo.

En CSS, traducimos eso a tres acciones simultáneas en los keyframes:

• Traslación vertical (translateY): Sube y baja simulando la trayectoria real.
• Escala en Y (scaleY): Al impactar el suelo, el objeto se aplana. Al subir de nuevo, se estira brevemente —imitando el efecto squash and stretch de la animación clásica.
• Timing-functions por tramo: ease-in al caer (acelera), ease-out al subir (desacelera). Esto es lo que separa un rebote convincente de uno robótico.

Efectos de ondas y loaders

Los tres puntos suspensivos que pulsamos mientras esperamos que cargue una aplicación son un ejemplo perfecto de múltiples keyframes + delays escalonados. Defines una sola animación de pulso vertical, y la aplicas a tres elementos con delays de 0s, 0.2s y 0.4s. El resultado: una ola visual que parece viva y coordinada.

Usos reales en interfaces premium

• Modales con entrada elástica: El modal entra rápido, se pasa ligeramente de su tamaño final (scale 1.05), y luego retrocede suavemente a su estado normal (scale 1). Eso requiere al menos tres keyframes: entrada, overshoot, y asentamiento.
• Shake de error: Un campo de formulario incorrecto vibra lateralmente con 6–8 keyframes en tramos muy cortos (10%, 20%, 30%...) alternando entre -8px y +8px. Es la traducción CSS de "eso no está bien".
• Indicadores de atención: Un badge o botón importante puede usar un "heartbeat" — un doble pulso de escala que imita un latido real con timing preciso.