免费在线CSS滚动驱动动画生成器，可视化创建scroll-driven animations，支持scroll()和view()时间线，实时预览效果。纯前端本地运行。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
自定义动画
常见问题
什么是CSS滚动驱动动画？
CSS滚动驱动动画是CSS新特性，允许动画进度由滚动位置控制，而非时间。使用animation-timeline: scroll()或view()来定义，无需JavaScript。
scroll()和view()有什么区别？
scroll()时间线基于滚动容器的滚动进度（0%到100%），view()时间线基于元素进入/离开视口的进度。scroll()适合页面级动画，view()适合元素出现动画。
浏览器兼容性如何？
Chrome 115+和Edge 115+完全支持。Firefox和Safari尚在开发中。建议使用@supports做渐进增强。