01¿Qué son las transiciones y cómo funcionan?
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
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 |
02¿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.
?Frequently Asked Questions
¿Cuál es la diferencia técnica entre una transición y una animación en CSS?
Una transición (transition) interpola visualmente entre dos estados y obliga la existencia de un disparador o trigger interactivo (ej. `:hover`). Una animación (animation) usa `@keyframes` para detallar múltiples etapas temporales y puede ejecutarse autónomamente al cargar el DOM o repetirse de forma infinita.
¿Por qué mis animaciones CSS se ven cortadas o con 'lag' en móviles?
Probablemente estás animando propiedades geométricas como anchos (`width`) o márgenes (`margin`). Esto fuerza al CPU del dispositivo a recalcular todas las colisiones del DOM en cada frame (Layout Thrashing). Para animaciones fluidas a 60fps, anima exclusivamente `transform` y `opacity`, y declara `will-change: transform`.
¿Cómo mantengo el estado final de una animación CSS para que no vuelva al inicio?
Debes usar la propiedad `animation-fill-mode: forwards;`. Esto le ordena al navegador que preserve los estilos calculados en el último keyframe (100%) una vez finalizada la línea de tiempo.
