CSS scroll-driven 动画生成器
可视化生成 CSS 滚动驱动动画（Scroll-driven Animations，animation-timeline，Chrome 115+ 原生支持）：
完整支持 scroll()（滚动位置驱动）与 view()（元素可见性驱动）两种时间线、
animation-range 范围控制（cover / contain / entry / exit / entry-crossing / exit-crossing）、
命名时间线、@keyframes 关键帧编辑。内置原理说明面板——实时展示
时间线类型、滚动容器源、轴向、范围语义。iframe 沙箱预览可在预览区内滚动实时查看动画效果，
可编辑预览 HTML，内置滚动进度条、淡入入场、视差滚动、卡片揭示等 7 组预设。
适用于滚动进度指示、元素入场动画、视差效果、滚动揭示等现代前端开发场景。所有处理在浏览器本地完成。
animation-duration 必须为 auto，animation-timeline 需单独声明（不能写入 animation 简写）。@keyframes progress-grow {
from {
width: 0%;
}
to {
width: 100%;
}
}
.progress {
animation-name: progress-grow;
animation-duration: auto;
animation-timeline: scroll(root block);
}常见问题
什么是 CSS scroll-driven 动画？它和普通动画有什么区别？
scroll-driven 动画（滚动驱动动画，Scroll-driven Animations 规范）是 CSS 动画的进化形态——
用滚动位置或元素可见性代替时间来驱动 @keyframes 关键帧进度。
普通动画的进度由 animation-duration（时长）决定，时间走完动画结束；
scroll-driven 动画的进度由滚动位置决定，滚动到哪动画到哪，可暂停、可回滚、可反复。
这带来三大优势：一是天然可交互，用户滚动即驱动动画，无需监听 scroll 事件写 JS；
二是性能更好，浏览器在合成线程处理，不掉帧；三是可暂停可回滚，
向上滚动动画反向播放，符合直觉。典型应用有滚动进度条、元素入场揭示、视差滚动等。
scroll() 与 view() 时间线有什么区别？各自适合什么场景？
两者是 scroll-driven 动画的两类时间线，驱动源不同：
scroll() 时间线：基于滚动容器的滚动位置驱动。整个滚动条从顶到底的进度
映射到关键帧 from → to。适合全局性动画，如顶部滚动进度条、视差背景、
随滚动旋转的图标。scroll(root block) 监听根容器垂直滚动，
scroll(nearest inline) 监听最近祖先的水平滚动。
view() 时间线：基于元素自身在滚动容器中的可见性驱动。
元素从进入视口到离开视口的过程映射到关键帧。适合元素级动画，
如卡片淡入入场、列表项依次揭示、图片缩放进场。view(nearest block) 监听元素在最近滚动祖先中的可见性，
可用 inset 调整可见区边距。
简单经验：动画与"整体滚动进度"相关用 scroll()，与"单个元素进场"相关用 view()。
animation-range 是什么？cover / contain / entry / exit 有什么区别？
animation-range 控制 scroll-driven 动画的有效范围——即滚动进度的哪一段映射到关键帧。
这对 view() 时间线尤其重要，因为元素进入视口到离开视口有多个阶段：
cover：元素从开始进入视口到完全离开视口的全程（默认范围）。
contain：元素完全在视口内的区间（元素完全可见才动画）。
entry：元素从开始进入视口到完全进入视口（进场阶段）。
exit：元素从开始离开视口到完全离开视口（离场阶段）。
entry-crossing：元素跨越视口边缘进入的阶段。
exit-crossing：元素跨越视口边缘离开的阶段。
还可用自定义范围，如 animation-range: entry 0% to entry 50%;
表示只在元素进场的前半段动画。本工具的"半程入场"预设展示了自定义范围的用法。
为什么 animation-duration 必须设为 auto？animation-timeline 能写入 animation 简写吗？
这是 scroll-driven 动画的两条核心规则：
animation-duration: auto：scroll-driven 动画的进度由时间线（滚动位置/可见性）决定，
不再由时长决定。auto 表示"时长由时间线接管"。若设为具体时长（如 1s），
动画会退化为普通时间驱动动画，scroll-driven 失效。
animation-timeline 必须单独声明：不能写入 animation 简写。
因为 animation 简写会把 animation-duration 重置为默认值 0s，
导致动画无法播放。正确写法是：
.target { animation-name: fade; animation-duration: auto; animation-timeline: view(); }。
本工具生成的代码即遵循这一规则，确保动画在浏览器中正确运行。
source 的 nearest 和 root 有什么区别？如何选择滚动容器？
source 参数指定时间线监听哪个滚动容器：
nearest：监听最近的滚动祖先（即 overflow: auto/scroll 的最近祖先元素）。
适合组件内滚动场景，如一个固定高度的滚动列表内元素的入场动画。
root：监听根滚动容器（即文档/documentElement 的滚动）。
适合全页滚动场景，如顶部进度条监听整页滚动进度。
选择原则：动画与"哪个滚动容器"相关就选哪个。若是全页滚动效果选 root，
若是组件内滚动效果选 nearest。注意：若最近祖先不是滚动容器（无 overflow 设置），
nearest 会向上查找直到根容器。本工具的"滚动进度条"预设用 root 监听全页滚动，
"淡入入场"预设用 nearest 监听组件内滚动。
什么是命名时间线？它和 scroll() / view() 有什么区别？
命名时间线是 scroll-driven 动画的进阶用法——先在滚动容器上用
scroll-timeline-name 或 view-timeline-name 定义具名时间线，
再在目标元素上用 animation-timeline: --name 引用。
与 scroll()/view() 的区别：scroll() 和 view() 是匿名时间线，
在目标元素上直接声明，简单直接但无法跨组件复用；命名时间线把时间线定义与动画引用分离，
一个滚动容器定义的时间线可被多个后代元素引用，适合复杂场景。
典型用法：
.scroller { view-timeline-name: --my-timeline; }
.target { animation-timeline: --my-timeline; animation-range: entry; }
命名时间线还支持 timeline-scope 把时间线作用域提升到祖先元素，便于跨层级引用。
本工具支持命名时间线类型，可输入自定义名称生成引用代码。
scroll-driven 动画的浏览器兼容性如何？如何做渐进增强？
兼容性：scroll-driven 动画自 Chrome 115+（2023-08）和 Edge 115+ 原生支持，
Safari 26+（2025）开始支持，Firefox 正在实现中（截至 2025 年仍在 flag 后）。
全球覆盖率约 75-80%，在 Chrome 系浏览器可放心生产使用。
渐进增强策略：scroll-driven 动画是增强特性——
不支持的浏览器会忽略 animation-timeline，元素保持默认样式（动画不播放但不报错）。
建议的渐进增强写法：
1. 先定义普通动画作为降级：.target { animation: fade 1s; }
2. 再用 @supports 增强：@supports (animation-timeline: view()) { .target { animation: fade auto; animation-timeline: view(); } }
这样旧浏览器播放 1 秒的普通淡入，新浏览器播放滚动驱动的淡入，两者体验都不差。
这个工具的预览安全吗？数据会上传吗？
完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 时间线配置、关键帧编辑、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，样式与 HTML 完全隔离在 iframe 内，
不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox 属性限制能力，预览内容无法执行脚本、提交表单或访问父页面。
- 生成的 scroll-driven CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
无需注册、无需登录、无 Cookie 追踪、无广告，适合处理任何 CSS 练习与生产场景。