无需登录 数据私有 本地保存

滚动驱动动画沙盒 - Animation Timeline演示

11
0
0
0
提示：CSS Scroll-driven Animations 需要 Chrome 115+ 或 Edge 115+。如果你的浏览器不支持，动画将显示为静态元素。
滚动驱动动画舞台
滚动: 0%
滚动进度条 (scroll-timeline)
↕ 向下滚动查看效果
缩放旋转
▼ 继续滚动 · 更多动画 ▼
旋转
颜色变换
▼ View Timeline 视口入场动画 ▼
View: 淡入
📌 视口驱动动画

当此元素进入滚动容器的视口时，自动触发淡入动画。无需任何JavaScript！

View: 滑入
🚀 侧滑入场

元素从左侧滑入，animation-range 精确控制触发时机。

View: 弹跳
🎯 滚动到底部 · 所有动画已完成
预设场景
对应 CSS 代码
小提示：点击预设按钮查看不同动画的CSS代码。使用自动演示按钮让舞台自动滚动，观察动画随滚动的变化。
常见问题 & 知识点
什么是CSS滚动驱动动画（Scroll-driven Animations）？
CSS滚动驱动动画是一种将动画进度与滚动位置绑定的新特性。传统的CSS动画基于时间（如2秒完成），而滚动驱动动画基于滚动进度——动画的播放由滚动位置决定。

核心价值：让动画与用户滚动行为完美同步，无需JavaScript即可实现视差效果、进度指示器、元素入场动画等丰富的交互体验。它主要通过 animation-timeline: scroll() 和 animation-timeline: view() 来实现。
scroll-timeline 和 view-timeline 有什么区别？
scroll-timeline（滚动时间线）：动画进度直接映射到滚动容器的滚动进度。滚动0%时动画在起始帧，滚动100%时动画在结束帧。适合进度条、随滚动连续变化的元素。

view-timeline（视口时间线）：动画在元素进入滚动容器的视口（可见区域）时触发。可以精确控制动画在元素"即将可见→完全可见→即将离开"的哪个阶段播放。适合懒加载动画、入场效果。

简单理解：scroll-timeline 关注"滚动了多少"，view-timeline 关注"元素是否在视野中"。
哪些浏览器支持滚动驱动动画？
目前 Chrome 115+ 和 Edge 115+ 已完整支持 scroll-driven animations（2023年8月发布）。
Firefox 和 Safari 正在开发中（截至2025年初，Safari Technology Preview已开始支持部分特性）。

生产环境建议：使用 @supports (animation-timeline: scroll()) 进行特性检测，为不支持的浏览器提供降级方案（如静态展示或JavaScript polyfill）。预计2025-2026年将成为主流跨浏览器特性。
如何使用 animation-range 精确控制动画范围？
animation-range 用于定义动画在时间线的哪个区间播放。

对于 scroll-timeline：animation-range: 0% 50% 表示动画在滚动的前50%完成，之后保持结束状态。

对于 view-timeline，支持更丰富的关键词：
· entry — 元素正在进入视口
· exit — 元素正在离开视口
· cover — 元素完全覆盖视口
· contain — 元素被视口完全包含
例如：animation-range: entry 0% entry 100% 表示动画在元素进入视口的整个过程中完成。
滚动驱动动画的性能如何？相比JavaScript方案有什么优势？
性能优势显著：CSS滚动驱动动画运行在浏览器的合成器线程（Compositor Thread）上，不占用主线程。这意味着即使在繁忙的页面中，动画也能保持60fps的流畅度，不会导致卡顿或jank。

对比JavaScript方案：传统JS滚动监听需要 scroll 事件 + requestAnimationFrame，这些都运行在主线程，容易造成性能瓶颈。CSS方案无需任何JS代码，浏览器可以独立优化，甚至在某些情况下实现零帧丢失。

额外优势：代码更简洁、维护成本更低、自动处理边界情况（如滚动容器大小变化）。
可以在生产环境中使用吗？如何优雅降级？
可以，但需要做好降级处理。推荐策略：

1. CSS特性检测：
@supports (animation-timeline: scroll()) { /* 滚动驱动动画 */ }
@supports not (animation-timeline: scroll()) { /* 降级样式 */ }

2. 渐进增强：将滚动驱动动画作为增强体验，基础功能不依赖它。例如进度条可以先设置一个默认宽度，支持时再启用动画。

3. JavaScript polyfill：可使用 ScrollTimeline polyfill 为不支持浏览器提供模拟支持，但会增加主线程负担。建议评估目标用户浏览器分布后再决定。
滚动驱动动画有哪些实际应用场景？
1. 阅读进度条：文章页面顶部进度条随滚动增长，最经典的应用。
2. 视差滚动效果：背景层和前景层以不同速率移动，营造深度感。
3. 元素入场动画：卡片、图片在进入视口时淡入/滑入，提升浏览体验。
4. 无限轮播/故事叙述：滚动驱动叙事性网页，如Apple产品页面。
5. 数据可视化：图表随滚动逐步绘制，增强数据故事的表现力。
6. 吸顶导航变换：导航栏随滚动改变大小、颜色、阴影。
7. 3D卡片翻转：产品卡片随滚动旋转展示不同角度。

几乎所有需要"滚动到某处触发某效果"的场景都可以用CSS滚动驱动动画优雅实现。
如何创建命名滚动时间线（Named Scroll Timeline）？
在滚动容器上定义命名时间线，让子元素引用：

滚动容器：
.scroll-container {
  scroll-timeline-name: --my-timeline;
  scroll-timeline-axis: block; /* 垂直滚动 */
}

动画元素：
.animated {
  animation: grow linear;
  animation-timeline: --my-timeline;
}

命名时间线的优势是可以被多个元素共享，且可以跨越DOM层级。一个页面可以有多个命名时间线，分别对应不同的滚动容器。
🔧 相关工具