引言CSS滚动驱动动画(Scroll-Driven Animations)是CSS动画领域的重大突破它允许动画进度直接由滚动位置驱动。这为创建沉浸式滚动体验、视差效果、滚动触发动画等提供了原生支持。一、滚动驱动动画基础1.1 核心概念滚动驱动动画是一种将动画进度与滚动位置关联的技术。keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } .element { animation: slide-in 1s linear; animation-timeline: scroll(); }1.2 与传统动画的对比特性传统动画滚动驱动动画驱动方式时间滚动位置控制方式时间函数滚动进度交互性有限高度交互性能依赖JS原生GPU加速1.3 核心属性属性作用值animation-timeline指定动画时间线scroll(),view()animation-range定义动画范围entry,cover,exitscroll-timeline自定义滚动时间线命名时间线二、基本用法2.1 滚动时间线/* 使用整个文档滚动 */ .element { animation: fade-in 1s linear; animation-timeline: scroll(); } /* 使用特定滚动容器 */ .container { scroll-timeline: --my-timeline; } .element { animation: slide-up 1s linear; animation-timeline: --my-timeline; }2.2 动画范围.element { animation: scale-up 1s linear; animation-timeline: scroll(); /* 元素进入视口时播放 */ animation-range: entry; /* 元素完全进入到完全退出 */ animation-range: cover; /* 元素退出视口时播放 */ animation-range: exit; /* 自定义范围 */ animation-range: 200px 400px; }2.3 命名时间线/* 定义命名滚动时间线 */ .scroll-container { scroll-timeline: --card-timeline; scroll-timeline-axis: block; } /* 使用命名时间线 */ .card { animation: fade-slide 0.5s ease-out; animation-timeline: --card-timeline; animation-range: entry; }三、实战案例3.1 视差滚动效果.parallax-layer { position: fixed; width: 100%; height: 100%; animation: parallax-move 1s linear; animation-timeline: scroll(); animation-range: entry cover; } .layer-1 { animation-duration: 2s; z-index: 1; } .layer-2 { animation-duration: 4s; z-index: 2; } .layer-3 { animation-duration: 6s; z-index: 3; } keyframes parallax-move { from { transform: translateY(0); } to { transform: translateY(-50%); } }3.2 滚动触发入场动画keyframes slide-in { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .card { animation: slide-in 0.6s ease-out; animation-timeline: scroll(); animation-range: entry; /* 保持最终状态 */ animation-fill-mode: both; }3.3 进度指示器.progress-bar { height: 4px; background: #007bff; animation: progress 1s linear; animation-timeline: scroll(); animation-range: 0 100%; } keyframes progress { from { width: 0%; } to { width: 100%; } }3.4 滚动视差文字.parallax-text { font-size: 4rem; font-weight: bold; color: rgba(0, 0, 0, 0.1); animation: text-parallax 1s linear; animation-timeline: scroll(); animation-range: entry cover; } keyframes text-parallax { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(100px); opacity: 0.5; } }四、高级特性4.1 滚动时间线轴/* 水平滚动 */ .scroll-container { scroll-timeline: --horizontal-timeline; scroll-timeline-axis: inline; } /* 垂直滚动默认 */ .scroll-container { scroll-timeline: --vertical-timeline; scroll-timeline-axis: block; }4.2 动画范围语法.element { /* 关键字 */ animation-range: entry; animation-range: cover; animation-range: exit; /* 长度值 */ animation-range: 100px 300px; /* 百分比 */ animation-range: 20% 80%; /* 混合 */ animation-range: entry 50%; }4.3 多个动画同步.container { scroll-timeline: --main-timeline; } .element-1 { animation: fade-in 0.5s ease-out; animation-timeline: --main-timeline; animation-range: entry; } .element-2 { animation: slide-up 0.5s ease-out; animation-timeline: --main-timeline; animation-range: cover; } .element-3 { animation: scale-up 0.5s ease-out; animation-timeline: --main-timeline; animation-range: exit; }4.4 视口时间线keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .element { animation: pulse 2s ease-in-out; animation-timeline: view(); animation-range: 20% 80%; }五、与JavaScript集成5.1 获取滚动进度const timeline document.querySelector(.container).scrollTimeline; // 监听滚动进度 timeline.addEventListener(scroll, (e) { console.log(Progress:, e.detail.progress); });5.2 动态调整动画function updateAnimationRange(element, start, end) { element.style.animationRange ${start} ${end}; }5.3 条件动画const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.style.animationPlayState running; } }); }, { threshold: 0.5 }); observer.observe(document.querySelector(.animated-element));六、浏览器兼容性6.1 当前支持情况浏览器版本支持状态Chrome115支持Firefox120支持Safari17.4支持Edge115支持6.2 降级方案.element { /* 现代浏览器 */ animation: slide-in 0.6s ease-out; animation-timeline: scroll(); /* 降级方案 */ supports not (animation-timeline: scroll()) { opacity: 1; transform: translateY(0); } }七、最佳实践7.1 性能优化/* 使用will-change提示浏览器 */ .element { will-change: transform, opacity; }7.2 避免过度动画/* 限制动画数量 */ .scroll-section { scroll-timeline: --section-timeline; } /* 只对关键元素应用动画 */ .section-title { animation: fade-in 0.5s ease-out; animation-timeline: --section-timeline; }7.3 响应式适配media (max-width: 768px) { .element { animation-duration: 0.3s; } }7.4 可访问性media (prefers-reduced-motion: reduce) { .element { animation: none; } }八、总结CSS滚动驱动动画是一项强大的新特性它使滚动体验更加丰富和互动。通过滚动驱动动画我们可以创建沉浸式视差效果实现滚动触发的入场动画构建进度指示器减少JavaScript依赖关键要点使用animation-timeline: scroll()绑定滚动使用animation-range定义动画范围使用scroll-timeline创建命名时间线考虑浏览器兼容性和降级方案掌握滚动驱动动画将使你的网页更加生动和专业。