导航栏文字滚动是网页动效里出镜率很高的一个需求，常见于顶部公告条、滚动菜单、跑马灯式提示信息等场景。很多人第一反应是用JavaScript写定时器去改变元素的left值，其实纯CSS就能优雅地完成这件事，而且性能更好。CSS动画把位移工作交给合成器线程处理，不会引起频繁的重排，滚动起来非常流畅。下面从基础写法讲起，一步步实现一个可用的无缝滚动导航栏。
一、基础滚动动画的写法
实现文字滚动最直接的方式，是给容器内的文字元素定义一个@keyframes关键帧动画，让它在水平方向上从起点平移到终点。关键帧里使用的属性是transform: translateX()，括号内可以填具体的像素值，也可以填百分比。这里有个细节需要注意：translateX(100%)移动的距离是元素自身宽度的100%，而如果想让元素移出父容器，需要配合负值使用。
先看一个最简单的例子，让一段文字从右往左滚入并滚出：
.scroll-text {
display: inline-block;
white-space: nowrap; /* 防止文字换行 */
animation: scrollLeft 5s linear infinite;
}
@keyframes scrollLeft {
0% {
transform: translateX(100%); /* 初始位置在容器右侧 */
}
100% {
transform: translateX(-100%); /* 移动到容器左侧外 */
}
}
这段代码的关键点有三个。第一是white-space: nowrap，它保证文字在一行内显示不被折断，否则换行后位移效果会很奇怪。第二是animation的简写参数：5s是单次滚动时长，linear表示匀速运动，去掉它默认是ease，滚动会出现先快后慢的节奏感，跑马灯场景下一般都用匀速。第三是infinite，表示无限循环播放。
不过这个基础版本有个明显缺陷：每次动画结束后会跳回起点，视觉上会闪一下。要解决这个问题，就得进入无缝滚动的实现。
二、无缝循环滚动的实现原理
无缝滚动的核心思路是内容复制：把需要滚动的文字复制一份紧挨着放在后面，动画从translateX(0)移动到translateX(-50%)。因为两份内容完全相同，当第一份滚出视野时，第二份恰好占据了第一份原来的位置，动画重置到起点的瞬间画面上没有任何变化，肉眼完全察觉不到切换，这样就形成了视觉上的无限循环。
完整的HTML和CSS代码如下：
<div class="nav-scroll">
<div class="scroll-track">
<span class="scroll-item">首页</span>
<span class="scroll-item">产品中心</span>
<span class="scroll-item">技术文档</span>
<span class="scroll-item">关于我们</span>
<span class="scroll-item">首页</span>
<span class="scroll-item">产品中心</span>
<span class="scroll-item">技术文档</span>
<span class="scroll-item">关于我们</span>
</div>
</div>
.nav-scroll {
width: 100%;
overflow: hidden; /* 超出部分隐藏 */
}
.scroll-track {
display: inline-flex;
white-space: nowrap;
animation: seamlessScroll 15s linear infinite;
}
.scroll-item {
padding: 0 24px;
font-size: 14px;
cursor: pointer;
}
@keyframes seamlessScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); /* 移动一半宽度，正好滚过一组内容 */
}
}
这里最容易被忽略的是-50%的含义。因为轨道里放了两份完全相同的内容，总宽度是单份的两倍，向左移动自身宽度的50%，正好等于滚过一份内容的距离。如果只复制一半内容或者百分比写错，滚动到循环点时就会出现跳变。另外overflow: hidden必须加在外层容器上，否则超出的内容会把页面撑出横向滚动条。
还有一个小技巧：轨道使用display: inline-flex或display: inline-block，可以让轨道宽度由内容撑开而不是占满父级。如果轨道占满父容器宽度，-50%计算的基准就变成了容器宽度而不是内容宽度，动画距离就错了。
三、交互增强与常见问题处理
实际项目中，滚动往往需要配合交互。最典型的需求是鼠标悬停时暂停滚动，方便用户看清或点击某个菜单项。CSS提供了animation-play-state属性，配合伪类选择器一行就能实现：
.scroll-track:hover {
animation-play-state: paused; /* 悬停时暂停动画 */
}
另一个常见需求是控制滚动方向。从左往右滚动只需把关键帧反过来写，起始位置设为translateX(-50%)，结束位置设为translateX(0)即可。如果想要上下方向的滚动，把translateX换成translateY，外层容器限制高度并隐藏溢出就行，原理完全一致。
性能方面有几点值得注意。位移一定要用transform而不是直接改left或margin-left，后者每帧都会触发重排，在低端设备上容易掉帧。如果滚动内容较多，建议给轨道加上will-change: transform，提前告知浏览器该元素将被动画化，浏览器会为其创建独立的合成层。但这个属性不能滥用，页面上大量元素都加反而会占用过多内存。此外，如果内容宽度是动态的（比如菜单项从接口加载），复制内容这份工作可以交给JavaScript在渲染后处理，CSS动画部分保持不变。
最后说一下transition和animation的选择。如果只是 hover 时文字滑入滑出这类单次触发的效果，用transition更简洁；而持续循环的滚动必须用animation配合@keyframes，因为transition无法自动循环，也不支持中间帧控制。把这套方案封装成通用组件后，公告轮播、标签滚动、图片无缝轮播都能复用，改动无非是滚动方向和容器尺寸而已。
CSS动画transform translateX@keyframes修改时间：2026-09-10 22:48:43