CSS 滚动驱动动画生成器
生成原生 CSS 滚动驱动动画 — 一个 @keyframes 块，连接到 animation-timeline: view() 或 scroll()，而不是固定时长 — 由现成预设（淡入、滑入、放大、旋转进入、显示裁剪路径）创建，支持可配置的动画范围。
输入
view() 在元素进入视口时添加动画；scroll() 将其绑定到页面滚动进度。
命名范围（entry/cover）与 view() 配对；scroll() 时间轴只理解纯百分比。
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-scroll-driven-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"timelineType": "view",
"animationRange": "entry 0% cover 100%"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-scroll-driven-animation-generator` tool (CSS Scroll-Driven Animation Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-scroll-driven-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 滚动驱动动画生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
滚动驱动动画使用原生 CSS 属性 animation-timeline 将元素的动画进度绑定到滚动位置而不是墙上时钟。设置为 view() 时，元素在进入视口时淡入、滑动、缩放、旋转或显示；设置为 scroll() 时，动画追踪页面（或滚动容器）的滚动进度 — 滚动连动进度条、视差层或显示效果，完全由合成器驱动，无需 JavaScript。
这个生成器为您构建两部分：一个 @keyframes 块，包含所选预设的正确 from/to 步骤，以及配套规则，用 animation-timeline 和 animation-range 连接它们以取代固定的 animation-duration。将两者都复制到您的样式表中，并将 .scroll-animate 替换为您自己的选择器。
浏览器支持
滚动驱动动画是相对较新的 CSS 功能。在撰写本文时，Chrome 和 Edge（115+）原生支持 animation-timeline: scroll() 和 view()。Firefox 和 Safari 尚不提供默认支持，因此将其视为渐进增强：配合 @supports not (animation-timeline: view()) 块一起使用，该块直接设置元素的最终状态（to），这样不支持的浏览器仍会显示合理的静态结果，而不是元素卡在不可见或屏幕外。在生产环境中依赖此功能前，请始终查看 caniuse.com/css-scroll-timeline 获取当前状态。
使用方法
- 选择预设 — Fade In、Slide In（从左/右/下）、Scale Up、Rotate In 或 Reveal Clip Path。每一个都是现成的
opacity/transform/clip-path步骤的from/to配对。 - 选择时间轴 —
view()在元素滚动进出视口时添加动画（最适合"滚动时显示"效果）；scroll()将动画绑定到最近滚动容器的总滚动进度（最适合进度条和视差风格效果）。 - 选择动画范围 — 控制时间轴的哪个部分播放动画。像
entry和cover这样的命名范围描述元素穿过视口的阶段，适用于view()；像0% 100%这样的纯百分比适用于任何时间轴类型。 - 复制生成的 CSS 并将其粘贴到样式表中，或作为
.css文件下载。
FAQ
为什么选择器是 .scroll-animate？
这是一个占位符，因此 CSS 已准备好粘贴 — 将其重命名以匹配您想要添加动画的元素。
animation-range 实际控制什么？
它将滚动时间轴的一部分映射到动画的 0%–100% 进度。例如，entry 0% cover 100% 在元素开始进入视口时启动动画，并在其完全覆盖（滚动过）该进入阶段时完成。
为什么没有 animation-duration？
滚动驱动动画不在时钟上运行 — 它们的"持续时间"是您通过 animation-range 分配给它们的滚动范围的数量。设置显式持续时间不是必需的（会被时间轴机制忽略）。
在尚不支持此功能的浏览器中会发生什么？
没有支持时，animation-timeline 会被简单地忽略，因此元素保持其默认状态（from） — 通常不可见或偏移。添加一个 @supports not (animation-timeline: view()) 块，其中包含元素的最终样式作为静态回退。
我可以为 opacity 和 transform 以外的属性添加动画吗？
是的 — 任何可添加动画的 CSS 属性都可以在 @keyframes 中工作，包括此处 Reveal 预设使用的 clip-path。Transform 和 opacity 是首选，因为它们对合成器友好，在滚动期间保持流畅。
隐私
一切都在浏览器中本地运行 — 您的设置永远不会离开您的设备，也不会向服务器发送任何 CSS 进行生成。