在HTML5页面开发中，实现滚动文字效果是常见的需求，而控制文字在滚动过程中的停留时间是优化动效体验的关键。通过CSS的animation属性配合延迟参数，就能灵活调整滚动文字的停留时长，不需要额外引入JavaScript代码，实现方式简单且兼容性好。
基础滚动文字实现
首先我们需要先搭建基础的滚动文字结构，通过HTML定义文字内容，再用CSS定义滚动的动画逻辑。基础的滚动效果可以通过@keyframes定义文字的移动路径，然后绑定到对应的元素上。
下面是基础滚动文字的HTML结构：
<div class="scroll-text-container"> <span class="scroll-text">这是一段需要滚动展示的文字内容</span> </div>
对应的基础CSS样式如下，这里先实现文字从右到左的滚动效果：
.scroll-text-container {
width: 300px;
overflow: hidden;
white-space: nowrap;
border: 1px solid #ccc;
padding: 10px 0;
}
.scroll-text {
display: inline-block;
padding-left: 100%;
animation: scrollMove 5s linear infinite;
}
@keyframes scrollMove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
结合animation延迟参数控制停留时间
要实现滚动文字的停留效果，核心是调整animation的animation-delay参数，同时配合animation-duration和animation-iteration-count来调整整体节奏。停留时间本质是让动画在某个阶段暂停，或者通过延迟下一次动画的启动来实现。
两种常见停留场景实现
场景1：滚动完成后停留一段时间再重复
这种场景需要让文字滚动到终点后，停留指定时长再重新开始滚动。我们可以通过调整animation-delay为负值，或者拆分动画阶段来实现，更推荐的方式是调整动画的关键帧，在终点阶段增加停留的区间。
修改后的CSS代码如下，这里设置停留时间为2秒：
.scroll-text {
display: inline-block;
padding-left: 100%;
/* 总时长7s：5s滚动 + 2s停留，infinite表示无限循环 */
animation: scrollWithPause 7s linear infinite;
}
/* 调整关键帧，让最后33%的区间停留在终点位置 */
@keyframes scrollWithPause {
0% {
transform: translateX(0);
}
66% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
这里的animation-duration设置为7秒，其中前66%的时间（约4.62秒）完成滚动，后34%的时间（约2.38秒）停留在终点，实际停留时间可以通过调整关键帧的百分比来灵活修改。比如想要停留3秒，就可以把滚动结束的关键帧设为70%，剩下的30%时间用来停留。
场景2：滚动开始前停留一段时间
如果需要文字先静止展示一段时间，再开始滚动，直接使用animation-delay参数即可，这个参数表示动画开始前的延迟时间。
.scroll-text {
display: inline-block;
padding-left: 100%;
animation: scrollMove 5s linear infinite;
/* 动画开始前停留2秒 */
animation-delay: 2s;
}
这里设置animation-delay为2s，文字加载后会先静止2秒，再开始执行滚动动画，每次循环都会先等待2秒再开始滚动。
参数调整参考表
不同需求下的参数调整可以参考下表，方便快速适配不同的停留时间要求：
| 需求场景 | 调整参数 | 示例值 | 说明 |
|---|---|---|---|
| 滚动完成后停留N秒 | @keyframes终点区间占比、animation-duration | 停留2秒：duration=7s，终点区间34% | 总时长=滚动时长+停留时长，终点区间占比=停留时长/总时长 |
| 滚动开始前停留N秒 | animation-delay | 停留2秒：animation-delay=2s | 仅影响第一次动画启动和每次循环的启动延迟 |
| 调整整体滚动速度 | animation-duration | 滚动变慢：duration=8s | 时长越长滚动速度越慢，需要同步调整停留区间占比 |
注意事项
- 如果使用
animation-delay设置正延迟，动画第一次执行前会有等待时间，后续每次循环都会遵循这个延迟规则。 - 拆分关键帧实现停留时，要确保
transform属性在停留区间的值保持一致，避免出现不必要的跳动。 - 如果页面有多个滚动文字实例，可以给不同的元素设置不同的
animation-duration和animation-delay，实现错落的动效。
通过上述方法，就可以仅用CSS的animation相关参数，实现HTML5滚动文字的停留时间控制，不需要依赖JavaScript，性能更优且实现成本更低。