在线CSS滚动驱动动画生成 - 可视化创建scroll()/view()驱动动画，实时预览
⬇️ 向下滚动查看动画效果 ⬇️
⬆️ 继续滚动 ⬆️
CSS滚动驱动动画（Scroll-Driven Animations）是CSS新特性，允许动画进度由滚动位置而非时间驱动。使用animation-timeline属性指定scroll()或view()时间线，无需JavaScript即可创建与滚动联动的动画效果。
scroll()基于滚动容器的滚动进度（0%到100%），整个滚动过程中动画完整播放一次。view()基于元素进入/离开视口的进度，元素进入视口时开始，离开时结束。view()适合元素入场动画，scroll()适合页面进度动画。
CSS滚动驱动动画目前在Chrome 115+、Edge 115+中支持。Firefox和Safari尚未完全支持。建议使用@supports检测或提供JavaScript降级方案。
CSS滚动驱动动画允许动画进度由滚动位置驱动，使用animation-timeline指定scroll()或view()时间线，无需JavaScript。
scroll()基于滚动容器滚动进度，view()基于元素进入/离开视口进度。view()适合入场动画，scroll()适合页面进度动画。
Chrome 115+和Edge 115+支持，Firefox和Safari尚未完全支持，建议使用@supports检测或JS降级。