web-animations
Installation
SKILL.md
Web Animations (WAAPI + CSS Transitions + CSS Animations)
Guia de referencia para las 3 APIs nativas de animacion del browser. Complementa la skill view-transitions (navegacion entre estados/paginas — ver ../view-transitions/SKILL.md).
Cuando Usar Cada API
| Necesidad | API | Por que |
|---|---|---|
| Hover, focus, estado simple | CSS Transitions | Declarativo, cero JS |
| Secuencia de keyframes pura CSS | CSS Animations | @keyframes + animation |
| Control runtime (pause, reverse, seek) | WAAPI | Element.animate() retorna Animation controlable |
| Scroll-driven reveal/parallax | CSS animation-timeline o WAAPI ScrollTimeline |
Off main thread, sin jank |
Entry desde display:none |
CSS Transitions + @starting-style + allow-discrete |
Nativo, sin JS |
Animacion de height: auto |
CSS + interpolate-size |
Chrome 129+, progressive enhancement |
| Logica per-frame (fisica, canvas) | requestAnimationFrame |
Ultimo recurso, main thread only |