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

滚动驱动动画生成器 - Scroll-timeline代码

12
0
0
0
滚动预览
Chrome 115+
向下滚动以查看动画效果
🎯 动画元素 #1 滚动驱动动画演示
继续滚动 ...
✨ 动画元素 #2 当此元素进入视口时触发
更多内容区域
🚀 动画元素 #3 靠近滚动区域底部
已到达底部 — 向上滚动回看动画
在预览框中滚动来观察动画效果
动画配置
view()：元素进出视口时触发 | scroll()：基于滚动条位置
→
cover=覆盖端口 | contain=被包含 | entry=进入 | exit=离开
生成的 CSS
常见问题 & 知识点

scroll() 基于滚动容器的整体滚动进度，0%对应滚动条在起始位置，100%对应滚动条在末尾。适合做阅读进度条、视差滚动等。
view() 基于目标元素相对于滚动容器视口的位置。每个元素有独立的时间线，在元素进入视口时开始，离开时结束。适合做滚动进入动画、懒加载效果等。

animation-range 用于精确控制动画在时间线上的起止位置。对于 view()，它定义了动画在元素穿过视口的哪个阶段发生。常用范围名称：cover（覆盖）、contain（包含）、entry（进入）、exit（离开）。例如 entry 20% cover 80% 表示动画从元素进入视口20%时开始，到覆盖视口80%时结束。

Chrome 115+ 和 Edge 115+ 完整支持。Firefox 正在开发中（可通过 layout.css.scroll-driven-animations.enabled 标志启用）。Safari 也正在实现。建议使用 @supports (animation-timeline: scroll()) 进行特性检测，为不支持的浏览器提供降级方案。

scroll(root) 绑定到文档根元素（通常即浏览器视口滚动条），适合全局进度条、页面级视差效果。
scroll(nearest) 绑定到最近的具有滚动溢出的祖先元素，适合局部滚动容器内的动画。
scroll(self) 要求元素自身可滚动（设置了overflow且内容溢出），适合卡片内部滚动动画。

可以通过多个动画属性叠加实现。例如：
animation: fade-in 1s ease both, pulse 2s infinite;
animation-timeline: scroll(root), auto;
这样第一个动画由滚动驱动，第二个动画按时间自动循环播放。使用逗号分隔即可为不同动画指定不同的时间线。
🔧 相关工具