滚动动画（CSS 滚动显现）

滚动动画（CSS 滚动显现）: 用途

随访客滚动而出现的板块会让页面更生动。这个生成器只用 CSS 创建效果，使用与滚动绑定的动画（animation-timeline: view()），不需要 AOS 或 ScrollReveal 等库。

选择效果（上移、仅淡入、左右滑入、放大或去模糊）、移动距离，以及动画在元素进入屏幕的哪个位置结束，然后滚动预览查看。代码放在 @supports 中，因此在仍把该功能放在实验选项后面的 Firefox 中，元素会正常显示而不会不可见，同时也尊重选择减少动态效果的用户。

使用方法

1. 选择效果和距离。
2. 设置动画在何处结束。
3. 复制 CSS，并把类名应用到各个板块。

使用场景

• 落地页。
• 服务和用户评价板块。
• 作品集。

常见问题

所有浏览器都支持吗？

与滚动绑定的动画（animation-timeline）在 Chrome、Edge 和 Safari 26 及更新版本中可用。Firefox 目前仍需开启实验性选项。因此代码放在 @supports 中：在不支持的地方，元素会正常显示，而不会变成不可见。

为什么不用 AOS 或 ScrollReveal 这样的库？

这些库用 JavaScript 监听滚动，会增加加载负担，在低端手机上还可能卡顿。使用 animation-timeline，动画由浏览器自己处理，网站更轻量。

喜欢减少动态效果的用户怎么办？

代码遵循 prefers-reduced-motion：对于开启该选项的用户，元素直接显示，不会滑动或放大。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具