El movimiento (motion) en la web no es solo estético, es funcional. Proporciona feedback y guía la mirada del usuario. Existen dos motores de interpolación nativos: las Transiciones (para cambios de estado simples) y las Animaciones con Keyframes (para historias visuales complejas).
1¿Qué son las transiciones y cómo funcionan?
Las transiciones son el motor de interpolación más básico. Requieren un 'disparador' (trigger) como un estado :hover o una clase añadida por JS. El navegador calcula automáticamente los fotogramas intermedios entre el valor inicial y el valor final basándose en una curva de aceleración matemática (timing-function).
### Comparativa: Transición vs Animación
| Característica | Transition | Animation (@keyframes) | Caso de uso ideal |
|---|---|---|---|
| Disparador | Requiere interacción (ej. hover) | Se ejecuta automáticamente o al cargar | Feedback interactivo vs Ambientación |
| Complejidad | 2 Estados (Inicio y Fin) | Múltiples pasos (0% a 100%) | Botones y menús vs Loaders y cinemáticas |
| Bucle (Loop)| Se ejecuta una vez | Puede ser infinito (infinite) | Estados UI vs Elementos de carga |
2¿Por qué evitar animar márgenes o anchos (Layout Thrashing)?
La regla de oro del rendimiento web: Nunca animes propiedades que alteren la geometría del DOM (como width, height, margin, top, left). Hacerlo obliga al motor del navegador a recalcular las posiciones de todos los demás elementos en cada frame, un proceso computacionalmente destructivo llamado *Layout Thrashing*.
Para garantizar 60 fotogramas por segundo (fps), anima estrictamente transform y opacity. Estas propiedades son extraídas del hilo principal y manejadas por el compositor de la tarjeta de video (GPU). Para casos extremos en móviles, usar will-change: transform pre-crea una capa en el compositor de la GPU, asegurando un inicio sin lag.
