CSS滚动驱动动画生成器 - scroll()/view()时间线·实时预览·免费

← 返回首页

快速模板

淡入效果

元素随滚动从透明到可见

滑入效果

元素从左侧滑入

缩放效果

元素随滚动缩放

进度条

页面滚动进度条

自定义动画

动画属性

起始值

结束值

滚动方向

CSS选择器

常见问题

什么是CSS滚动驱动动画？

CSS滚动驱动动画是CSS新特性，允许动画进度由滚动位置控制，而非时间。使用animation-timeline: scroll()或view()来定义，无需JavaScript。

scroll()和view()有什么区别？

scroll()时间线基于滚动容器的滚动进度（0%到100%），view()时间线基于元素进入/离开视口的进度。scroll()适合页面级动画，view()适合元素出现动画。

浏览器兼容性如何？

Chrome 115+和Edge 115+完全支持。Firefox和Safari尚在开发中。建议使用@supports做渐进增强。