CSS Scroll-Driven Animations — 스크롤 기반 애니메이션

스크롤 타임라인

/* 스크롤에 따라 진행되는 애니메이션 */
.progress-bar {
  animation: fill-bar linear;
  animation-timeline: scroll();
}

@keyframes fill-bar {
  from { width: 0%; }
  to { width: 100%; }
}

/* 요소가 뷰포트에 들어올 때 */
.card {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

Intersection Observer + GSAP 없이 순수 CSS만으로 구현됩니다.