Animation

getAnimations()

해당 요소에 진행 중이거나 예약된 애니메이션들을 전부 Animation 객체 배열로 반환
반환 값 - CSS Animation, CSS Transition, Web Animations API

element.getAnimations(); // 자기 자신에만 적용된 애니메이션 반환
element.getAnimations({ subtree: true }); 
// 자신 + 모든 자식 요소에 걸린 애니메이션까지 포함

Promise.all(
  elem.getAnimations({ subtree: true }).map((animation) => animation.finished)
).then(() => elem.remove());
// 요소와 그 하위 요소들 애니메이션이 다 끝날 때까지 기다렸다가 elem을 제거하는 구조

currentTime ()

현재 애니메이션이 어디까지 진행되었는지 (밀리초 단위로) 나타냄
설정도 가능해서 애니메이션을 특정 시점으로 이동 가능

const anim = el.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 1000, fill: 'forwards' }
);

// 0.5초 지점으로 바로 이동
anim.currentTime = 500;

❌ 아직 .play()가 안 된 애니메이션이거나,타임라인이 없거나 (document에 없거나), 애니메이션이 취소됨(cancel) 상태면 → .currentTime은 null 반환

지연 시간 포함한 정확한 중간 지점으로 이동하는 공식적인 방식

anim.currentTime =
  anim.effect.getComputedTiming().delay +
  anim.effect.getComputedTiming().activeDuration / 2;

animation.pause()

애니메이션 일시 정지
호출 시 currentTime = null

animation.cancel()

해당 애니메이션이 적용한 모든 KeyframeEffect를 제거하고 재생을 즉시 중단

애니메이션을 취소(cancel) 하면 startTime과 currentTime이 null로 초기화
애니메이션이 실행 중이거나 일시정지 상태일 때 취소하면 그 애니메이션와 연결된 finished 프로미스가 AbortError DOMException과 함께 거부됨

animation.finish()

애니메이션이 앞으로 재생 중이라면, 재생 위치를 애니메이션 길이(끝)로 이동
애니메이션이 역방향(reversed) 재생 중이라면, 재생 위치를 0(처음)으로 이동
이렇게 하면 애니메이션이 즉시 "끝난 상태"로 전환

animation.commitStyles()

애니메이션이 끝난 후 애니메이션 상태(즉, 계산된 스타일)를 해당 요소의 인라인 스타일(style 속성)에 영구적으로 기록하는 기능
왜씀?
fill: "forwards"는 브라우저가 애니메이션 상태를 계속 추적해야 하므로 메모리나 성능에 부담
commitStyles()를 호출하면 최종 스타일을 요소에 직접 기록해 버려서 애니메이션을 취소해도 스타일이 유지되고 브라우저가 애니메이션 상태를 계속 유지할 필요가 없게 됨
애니메이션을 종료시키면서 최종 상태를 진짜 스타일로 남기고 싶을 때 유용 (일회성?)

button.addEventListener("click", async () => {
  const animation = button.animate(
    { transform: `translateX(100px)` },
    { duration: 500, fill: "forwards" },
  );

  await animation.finished;  // 애니메이션 종료 대기
  animation.commitStyles();  // 최종 스타일을 요소에 기록
  animation.cancel();        // 애니메이션 취소 (브라우저 추적 종료)
});

animation.finish

애니메이션이 자연스럽게 끝났을 때 실행

const animation = elem.animate(
  { opacity: [0, 1] },
  { duration: 1000 }
);

animation.addEventListener("finish", () => {
  console.log("애니메이션 끝");
});

혹은

animation.onfinish = () => {
  console.log("애니메이션 끝");
};

animation.overallProgress

현재 애니메이션의 전체 진행 상태를 0부터 1 사이의 숫자로 나타냄
이 값은 전체 반복 횟수를 고려한 누적 진행률이며 한 반복 내의 진행률이 아님

btn.addEventListener("click", () => {
  requestAnimationFrame(updateProgress);
});

function updateProgress() {
  if (animation.playState !== "finished") {
    const percent = Math.floor(animation.overallProgress * 100);
    progress.textContent = `Progress: ${percent}%`;
    requestAnimationFrame(updateProgress);
  } else {
    progress.textContent = "Finished!";
  }
}

animation.ready

애니메이션이 실행 준비가 되었을 때 완료되는 Promise

animation.pause();

animation.ready.then(() => {
  // 애니메이션이 준비 완료되면 실행됨
  console.log(animation.playState); // "running"
});

animation.play();

checkVisibility()

element.checkVisibility(); 
// true 또는 false 반환

element.checkVisibility({ opacityProperty: true })
// 이 옵션을 쓰면 opacity: 0인 요소는 "안 보이는 것" 으로 간주해서 사용자에게 안 보이면 false 반환

element.checkVisibility({
  opacityProperty: true,
  visibilityProperty: true, 
  contentVisibilityAuto: true, 
});