当前位置：首页 > news >正文

CSS 滚动驱动动画详解：创建沉浸式滚动体验

news 2026/6/1 3:29:59

CSS 滚动驱动动画详解：创建沉浸式滚动体验

引言

滚动驱动动画是现代 Web 开发中最令人兴奋的特性之一。它允许动画与用户的滚动行为同步，创造出沉浸式的视觉体验。CSS Scroll-Driven Animations 让这一切变得简单而强大。

什么是滚动驱动动画

滚动驱动动画是指动画的进度由滚动位置决定。当用户滚动页面时，动画会根据滚动的距离自动更新，创造出流畅的视觉效果。

基础用法

使用 scroll-timeline

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .element { animation: fade-in 1s linear; animation-timeline: scroll(); }

指定滚动容器

@keyframes slide-up { from { transform: translateY(100px); } to { transform: translateY(0); } } .scroll-container { scroll-timeline-name: --container-scroll; } .element { animation: slide-up 1s linear; animation-timeline: --container-scroll; }

高级配置

自定义滚动范围

@keyframes scale { from { transform: scale(0.8); } to { transform: scale(1); } } .element { animation: scale 1s linear; animation-timeline: scroll(root block); animation-range: entry-crossing 0% exit-crossing 100%; }

视口内动画

@keyframes parallax { from { transform: translateY(0); } to { transform: translateY(50px); } } .parallax-element { animation: parallax 1s linear; animation-timeline: scroll(); animation-range: contain 0% contain 100%; }

实战案例

视差滚动效果

.parallax-container { height: 100vh; overflow-y: scroll; scroll-timeline-name: --parallax-timeline; } .parallax-layer { position: fixed; inset: 0; } .parallax-layer.bg { animation: bg-move 1s linear; animation-timeline: --parallax-timeline; } .parallax-layer.content { animation: content-move 1s linear; animation-timeline: --parallax-timeline; } @keyframes bg-move { from { transform: translateY(-20%); } to { transform: translateY(20%); } } @keyframes content-move { from { transform: translateY(0); } to { transform: translateY(10%); } }

滚动进度指示器

.progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(90deg, #667eea, #764ba2); animation: progress-grow 1s linear; animation-timeline: scroll(); animation-range: 0% 100%; } @keyframes progress-grow { from { width: 0%; } to { width: 100%; } }

图片序列动画

.image-sequence { width: 400px; height: 300px; background-image: url('frame-001.jpg'); animation: image-sequence 2s steps(24) forwards; animation-timeline: scroll(); animation-range: 0% 100%; } @keyframes image-sequence { 0% { background-image: url('frame-001.jpg'); } 4% { background-image: url('frame-002.jpg'); } 8% { background-image: url('frame-003.jpg'); } /* ... */ 100% { background-image: url('frame-024.jpg'); } }

JavaScript 集成

获取滚动进度

const element = document.querySelector('.animated-element'); const animation = element.getAnimations()[0]; animation.onprogress = (event) => { console.log('Animation progress:', event.currentTime); };

动态创建滚动时间线

const scrollContainer = document.querySelector('.scroll-container'); const scrollTimeline = new ScrollTimeline({ source: scrollContainer, orientation: 'block', scrollOffsets: [ new CSSUnitValue(0, 'px'), new CSSUnitValue(500, 'px'), ], }); element.animate( { opacity: [0, 1] }, { duration: 1000, timeline: scrollTimeline, } );

性能优化

使用 will-change

.element { will-change: transform, opacity; animation: fade-scale 1s linear; animation-timeline: scroll(); }

避免复杂动画

/* 避免在滚动驱动动画中使用复杂效果 */ .element { animation: simple-fade 0.5s linear; animation-timeline: scroll(); }

使用 contain 属性

.element { contain: layout paint style; animation: slide-in 1s linear; animation-timeline: scroll(); }

兼容性处理

检测浏览器支持

if ('animationTimeline' in CSS.supports('animation-timeline: scroll()')) { // 支持滚动驱动动画 enableScrollAnimations(); } else { // 降级方案 fallbackAnimation(); }

降级方案

/* 不支持时的降级样式 */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .element { animation: fade-in 0.5s ease-out; } @supports (animation-timeline: scroll()) { .element { animation: fade-in 1s linear; animation-timeline: scroll(); animation-range: entry-crossing 0% exit-crossing 100%; } }