const element = document.querySelector(".box");

const animation = element.animate(
  [
    { transform: "translateX(0)", opacity: 1 },
    { transform: "translateX(300px)", opacity: 0.5 },
  ],
  {
    duration: 1000,
    easing: "ease-in-out",
    fill: "forwards",
  }
);

// CSS: 선언적 → 제어 어려움
// WAAPI: 명령적 → 세밀한 제어 가능

animation.pause();
animation.reverse();
animation.playbackRate = 2; // 2배속
animation.currentTime = 500; // 특정 시점으로 이동

// 완료 감지
animation.finished.then(() => {
  console.log("Animation complete!");
});

const effect = new KeyframeEffect(
  element,
  [
    { transform: "scale(1)", offset: 0 },
    { transform: "scale(1.2)", offset: 0.3 },
    { transform: "scale(0.8)", offset: 0.7 },
    { transform: "scale(1)", offset: 1 },
  ],
  { duration: 800, iterations: Infinity }
);

const animation = new Animation(effect, document.timeline);
animation.play();

const timeline = new ScrollTimeline({
  source: document.documentElement,
  axis: "block",
});

element.animate(
  { opacity: [0, 1], transform: ["translateY(50px)", "translateY(0)"] },
  { timeline, rangeStart: "entry 0%", rangeEnd: "entry 100%" }
);