CSS Scroll-Driven Animations：滚动驱动的动画

CSS Scroll-Driven Animations 是 2023 年 Chrome 推出的新特性，让滚动触发动画不再需要 JavaScript 监听 scroll 事件。

一、基本用法

.element {
  animation: fade-in linear;
  animation-timeline: view();
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

二、滚动进度动画

.progress-bar {
  animation: grow linear;
  animation-timeline: scroll(root);
}

@keyframes grow {
  from { width: 0; }
  to { width: 100%; }
}

三、视口进入/离开动画

.card {
  animation: slide-up linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

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

四、兼容性

Chrome 115+ 支持，Firefox/Safari 还在开发。可以用 @supports 或 JS 降级。