UD5工具箱
第一步：选择时间线类型
打开 CSS 滚动时间线生成器页面后，首先需要确定使用哪种时间线类型。页面顶部提供了 View Timeline 和 Scroll Timeline 两个选项卡。如果您的目标是让某个元素在滚动到可视区域时触发动画（例如文章段落的渐入效果），请选择 View Timeline。如果您的目标是基于整个页面或某个滚动容器的滚动进度来驱动动画（例如页面顶部的滚动进度条），请选择 Scroll Timeline。两种类型的选择会直接影响后续所有配置项的可选范围和默认值，因此请根据实际需求谨慎选择。
第二步：配置滚动轴方向
在确定时间线类型后，接下来需要选择滚动轴方向。默认值为 block，适用于绝大多数纵向滚动的网页场景。如果您的项目涉及水平滚动画廊或横向内容流，请切换为 x 方向。inline 方向适用于阿拉伯语等从右到左排版的多语言场景。y 方向与 block 类似，但更明确地指定垂直方向。滚动轴的选择决定了动画时间线的计算基准方向，选择错误会导致动画触发时机与预期不符。
第三步：设置动画范围参数
动画范围控制动画在滚动时间线中的执行区间。通过拖动起始百分比和结束百分比的滑块，可以精确定义动画的触发和结束位置。起始百分比为 0% 表示滚动一开始就开始执行动画，结束百分比为 100% 表示滚动到底部时动画刚好完成。您可以根据需要设置非对称的范围值，例如将起始设为 30%、结束设为 70%，让动画仅在滚动的中间段执行。这在编排多段滚动动画时尤其有用。
第四步：选择滚动源
滚动源决定了动画参考哪个滚动容器的滚动进度。nearest 选项会让动画参考最近的可滚动祖先元素，这是最常用的配置，适用于大多数嵌套滚动的页面布局。root 选项参考文档根元素的滚动，适合页面级的全局滚动动画。self 选项参考元素自身的滚动，适用于元素本身具备 overflow 属性的特殊情况。选择合适的滚动源对于确保动画在正确的上下文中触发至关重要。
第五步：选择预设效果或自定义动画
工具提供了五种预设动画效果，您可以在预设面板中一键选择。淡入上移适合文章内容的渐入展示，缩放进入适合图片或卡片的弹性出现，左滑进入适合横向内容的滑入效果，旋转淡入适合创意性的装饰元素。如果您需要更精细的控制，可以选择自定义模式，分别调整透明度变化范围、Y 轴位移距离和缩放比例三个核心参数。每个参数都配有直观的滑块控件，拖动即可实时查看效果变化。
第六步：实时预览与调试
完成上述配置后，将注意力转向右侧的实时预览区域。预览区域模拟了一个可滚动的容器，其中包含应用了当前配置的动画元素。通过拖动滚动条或使用鼠标滚轮来触发滚动动画，仔细观察动画的触发时机、过渡速度和视觉效果是否符合预期。如果效果不满意，可以随时返回调整任何参数，预览区域会即时更新。这种即时反馈的调试方式相比传统的修改代码-刷新页面循环，效率提升数倍。
第七步：复制生成的代码
当预览效果达到预期后，滚动到页面底部的代码输出区域。工具已自动生成完整的 CSS 代码，包含 @keyframes 动画定义、animation 复合属性配置和滚动时间线声明。点击代码区域右上角的复制按钮，即可将代码复制到剪贴板。然后将代码粘贴到您的项目样式表中，并确保对应的 HTML 元素添加了必要的 class 或 id 选择器。生成的代码兼容 Chrome 115 及以上版本，建议在项目中使用 @supports 规则进行特性检测，为不支持的浏览器提供降级方案。