// TECHNIQUE_E.EXE
Web Animations
API
JS usa element.animate(keyframes, options) para animar programáticamente con control total del easing, duración y estado final (fill: 'forwards').
vs CSS Transitions
Animación imperativa
WAAPI permite controlar animaciones desde JS: pausar, revertir, cambiar velocidad. Más control que
classList + transition.fill: 'forwards'
Estado final persistente
Con
fill: 'forwards' el elemento mantiene los estilos del último keyframe. Equivale a mantener la clase CSS al terminar.Stagger
Links en cascada
Cada link del menú móvil se anima con un
delay incremental usando i * 50ms, creando un efecto de cascada imposible con CSS solo.Reversa
Animación de cierre
Al cerrar, se reproduce la misma animación en reversa con
animation.reverse(), y al terminar se oculta con display: none.
// Web Animations API: element.animate(keyframes, timing)
function openMenu(menu) {
menu.classList.add('visible'); // display: block
// Animar el contenedor
menu.animate([
{ opacity: 0, transform: 'translateY(-8px)' },
{ opacity: 1, transform: 'translateY(0)' }
], { duration: 280, easing: 'cubic-bezier(0.4,0,0.2,1)', fill: 'forwards' });
// Animar links en cascada (stagger)
menu.querySelectorAll('a').forEach((link, i) => {
link.animate([
{ opacity: 0, transform: 'translateX(-12px)' },
{ opacity: 1, transform: 'translateX(0)' }
], { duration: 220, delay: i * 50, fill: 'forwards',
easing: 'cubic-bezier(0.4,0,0.2,1)' });
});
}