CSS滚动时间线生成器 - scroll-timeline/view-timeline可视化工具

← 返回首页

⚙️ 时间线类型

📝 参数设置

时间线名称

滚动方向

动画属性

起始值

结束值

👁️ 实时预览（滚动查看效果）

⬇️ 向下滚动查看动画效果

滚动驱动动画是CSS的新特性，

让动画与滚动位置关联，

无需JavaScript即可实现

视差滚动、进度指示器等效果。

继续滚动...

到底了 ↑

📋 CSS代码

💡 使用说明

scroll-timeline：将滚动容器的滚动进度映射为动画时间线
view-timeline：将元素进入/离开视口的进度映射为动画时间线
scroll()：匿名滚动时间线，无需命名
浏览器支持：Chrome 115+、Edge 115+，Safari暂不支持
纯前端工具，所有设置即时生效