免费在线CSS滚动驱动动画生成器，可视化创建scroll()-driven和view()-driven动画，实时预览效果，生成CSS代码，无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用⚙️ 动画配置
scroll() 滚动进度
view() 视图进度
👁️ 实时预览（滚动查看效果）
⬇️ 向下滚动查看动画效果 ⬇️
⬆️ 继续滚动 ⬆️
📦 生成的CSS代码
常见问题 (FAQ)
什么是CSS滚动驱动动画？
CSS滚动驱动动画允许动画进度由滚动位置驱动，使用animation-timeline指定scroll()或view()时间线，无需JavaScript。
scroll()和view()有什么区别？
scroll()基于滚动容器滚动进度，view()基于元素进入/离开视口进度。view()适合入场动画，scroll()适合页面进度动画。
浏览器兼容性如何？
Chrome 115+和Edge 115+支持，Firefox和Safari尚未完全支持，建议使用@supports检测或JS降级。