Optimización de animación UX 2025 — Mejorar la experiencia y reducir bytes

Por qué abandonar GIF

GIF es ineficiente, con poca calidad y gama limitada. En 2025, usa WebP/AVIF animado para UI y MP4/WebM para escenas fotográficas.

Selección de formato

• Bucles cortos / UI: WebP/AVIF animado
• Acción real / audio: MP4/WebM
• Transparencia: WebP animado (ver compatibilidad de AVIF alpha)

Patrón de implementación

<video autoplay loop muted playsinline width="640" height="360" preload="metadata">
  <source src="/loop.webm" type="video/webm" />
  <source src="/loop.mp4" type="video/mp4" />
  <img src="/loop.jpg" alt="Bucle corto" />
  
</video>

Diseño de la experiencia

• Respeta prefers-reduced-motion y ofrece pausa/detener.
• No bloquees FCP/LCP; precarga justo antes de la interacción.
• Miniatura estática; carga la animación bajo demanda.

Reduced motion en CSS

@media (prefers-reduced-motion: reduce) {
  .anim { animation: none !important; transition: none !important; }
}

Presupuestos de rendimiento/datos

• Hero: ~500–800KB; si se requiere más calidad, póster + reproducción diferida.
• Evita varias reproducciones simultáneas; una por intención del usuario.
• En móvil, preload="none" y asigna src tras interacción.

Checklist

• [ ] Reemplazar GIF por WebP/AVIF/video
• [ ] Aclarar transparencia/bucle
• [ ] Respetar prefers-reduced-motion
• [ ] Optimizar lazy y caché

Casos prácticos

• Indicador de carga → CSS: -30KB.
• Hero: 2.4MB GIF → 420KB WebM.
• Desencadenar con scroll: IntersectionObserver al 30%.

FAQ

• P: ¿Cuándo detener autoplay en móvil?

  • R: Manténlo corto y mudo; prefiera reproducción iniciada por el usuario para contenido largo.

• P: ¿WebP o AVIF?

  • R: AVIF suele ganar en calidad/ratio; añade WebP como respaldo.

• P: ¿Impacto SEO?

  • R: Protege LCP/CLS. Evita autoplay en la hero; usa póster + lazy.

• P: ¿Subtítulos y accesibilidad?

  • R: Proporciónalos si el video tiene significado; soporta teclado/pausa/volumen.

Principios — movimiento con propósito

• Significado, seguridad (evitar >3Hz), consistencia y reversibilidad.

Tiempos y curvas

• 120–180ms (componentes), 180–240ms (modales), 240–320ms (páginas), resortes: amortiguación 20–28 / rigidez 140–220.

.btn{transition:transform 160ms cubic-bezier(.2,0,0,1),box-shadow 160ms ease-out}
.btn:active{transform:translateY(1px)}

Web Animations API y resortes

const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
const el = document.querySelector('.card');
if (!reduce && el) el.animate([
  { transform:'translateY(8px)', opacity:0 },
  { transform:'translateY(0)', opacity:1 },
], { duration:220, easing:'cubic-bezier(.2,0,0,1)', fill:'both' });

Scroll‑vinculado

const io = new IntersectionObserver(es=>{for(const e of es) if(e.isIntersecting) e.target.classList.add('in')},{threshold:.3});
document.querySelectorAll('.reveal').forEach(n=>io.observe(n));

Lottie / CSS / Video — elección

• Lottie: iconos/ilustración; CSS: micro‑interacciones; Video: calidad y audio.

Medición

new PerformanceObserver(list=>{for(const e of list.getEntries()) console.log(e.entryType,e.name,e.duration)}).observe({entryTypes:['longtask','measure']});

Accesibilidad y seguridad

• Ofrece detener/pausar/ocultar; respeta reduced motion; evita parpadeos 3–60Hz.

Envío seguro — checklist

• [ ] KPI claros; [ ] transform/opacity; [ ] lazy o inicio por usuario; [ ] UI de detener; [ ] A/B.