web-animations

Referencia completa para las 3 APIs nativas de animación del browser: Web Animations API (WAAPI), CSS Transitions y CSS Animations, incluyendo scroll-driven animations.

Triggers

Frases que activan el skill
“animar elemento” / “Element.animate”
“WAAPI” / “web animations api”
“css transition” / “css animation” / “@keyframes”
“animation-timeline” / “scroll-driven animation”
“ScrollTimeline” / “ViewTimeline”
“pausar animacion” / “reverse animation”
“commitStyles” / “KeyframeEffect” / “getAnimations”
“@starting-style” / “allow-discrete”
“interpolate-size” / “height auto animation”
“fade in on scroll” / “animar al hacer scroll”
“animation performance” / “will-change”
“prefers-reduced-motion”

Qué cubre

SKILL.md principal (~190 líneas)

  • Decision matrix: cuándo usar cada API (CSS Transitions vs CSS Animations vs WAAPI)
  • WAAPI core: Element.animate(), objeto Animation, playback control, commitStyles()
  • CSS Transitions: @starting-style, allow-discrete, eventos
  • CSS Animations: @keyframes, animation-composition, eventos
  • Performance: propiedades compositor vs main thread, will-change, layout thrashing
  • Gotchas: 8 trampas comunes
  • Browser support table
  • Checklist pre-deploy

references/scroll-driven.md

  • Scroll Progress Timeline (animation-timeline: scroll())
  • View Progress Timeline (animation-timeline: view())
  • Named timelines y timeline-scope
  • WAAPI: ScrollTimeline y ViewTimeline constructors
  • @supports guard obligatorio
  • Patrones: parallax, progress indicator

references/waapi-advanced.md

  • KeyframeEffect constructor
  • Composite modes (replace, add, accumulate)
  • Pseudo-element targeting
  • Auto-removal y replaceState
  • getAnimations() type narrowing
  • Secuencias con finished promises

references/patterns.md

  • interpolate-size para animar height: auto
  • prefers-reduced-motion (CSS + JS + reactivo)
  • Entry/exit con popover y dialog
  • Timing functions modernas (linear(), steps())
  • Duraciones recomendadas por tipo de animación
  • requestAnimationFrame (cuándo usarlo)

Relación con otros skills

  • view-transitions: Cubre navegación entre estados/páginas (View Transitions API). web-animations cubre animaciones de elementos individuales y scroll-driven.
  • video-debugger: Para debug visual de animaciones frame-by-frame con ffmpeg.

Ejemplo de uso 

> Necesito que unas cards hagan fade-in cuando aparecen en el scroll
→ Activa web-animations → usa scroll-driven animations con animation-timeline: view()

> Tengo una animación CSS y quiero pausarla con un botón
→ Activa web-animations → usa WAAPI getAnimations() + pause()/play()

> Quiero animar un accordion con height auto
→ Activa web-animations → usa interpolate-size con fallback max-height