如何用JavaScript进行高级动画编程（如使用GSAP或Web Animations API）？

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

gsap.to(".box", {
  x: 300,
  rotation: 360,
  duration: 1.5,
  ease: "power2.out"
});

const tl = gsap.timeline();
tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: -50, duration: 0.8 }, "-=0.5") // 与上一个动画后0.5秒重叠
  .to(".box3", { scale: 1.5, duration: 1 });

gsap.registerPlugin(ScrollTrigger);

gsap.to(".fade-in", {
  opacity: 1,
  y: -20,
  duration: 1,
  scrollTrigger: {
    trigger: ".fade-in",
    start: "top 80%",
    end: "bottom 20%",
    toggleActions: "play none none reverse"
  }
});

document.querySelector(".box").animate(
  [
    { transform: 'translateX(0)', opacity: 0 },
    { transform: 'translateX(200px)', opacity: 1 }
  ],
  {
    duration: 1000,
    easing: 'ease-out',
    fill: 'forwards'
  }
);

const anim = element.animate(keyframes, timing);
anim.pause();
anim.play();
anim.reverse();

anim.currentTime = 500; // 跳转到500ms处
anim.playbackRate = 2;   // 加速播放