Scroll-driven animations là gì?

/* 1. scroll() — theo tiến độ cuộn của cả vùng cuộn */
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.progress-bar {
  transform-origin: left;
  animation: grow linear;
  animation-timeline: scroll();      /* mặc định: vùng cuộn gần nhất, trục dọc */
}

/* 2. view() — theo vị trí của chính element trong viewport */
@keyframes fade-up { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }

.card {
  animation: fade-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;   /* chạy trong lúc element đang đi vào */
}

@supports (animation-timeline: view()) { /* chỉ bật hiệu ứng khi hỗ trợ */ }