可视化创建CSS滚动驱动动画。支持scroll()和view()时间线，实时预览，一键复制代码。
0%
100%
常见问题
什么是CSS滚动驱动动画？
CSS滚动驱动动画是CSS新特性，允许动画进度由滚动位置控制，而非时间。使用animation-timeline属性绑定scroll()或view()时间线，无需JavaScript即可创建滚动触发的动画效果。
scroll()和view()时间线有什么区别？
scroll()时间线：动画进度与滚动容器的滚动位置绑定。view()时间线：动画进度与元素在视口中的可见性绑定。view()适合元素入场/出场动画，scroll()适合页面级进度动画。
浏览器兼容性如何？
Chrome 115+、Edge 115+完全支持。Firefox和Safari尚在开发中。建议使用@supports检测并提供JavaScript回退方案。
如何使用生成的代码？
1）在工具中配置动画参数并预览效果；2）复制生成的CSS代码；3）粘贴到项目样式表中；4）确保HTML结构匹配；5）添加浏览器兼容性回退。