导航栏滚动文本切换动画优化方案咨询

原方案依赖手动计算translateX百分比，不仅维护麻烦，还很难适配不同屏幕尺寸。下面给出一套更灵活、易维护的实现方式，完全摆脱硬编码数值的困扰。

核心优化思路 #

• 用绝对定位让所有文本元素重叠在同一居中位置，无需手动计算偏移量
• 统一动画关键帧逻辑，通过动画延迟实现文本交替切换
• 使用相对单位和百分比位移，自动适配不同屏幕

实现代码 #

HTML结构（简化语义化） #

<div class="nav-text-container">
  <div class="nav-text">display one</div>
  <div class="nav-text">display two</div>
</div>

CSS样式（优化后） #

.nav-text-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* 隐藏超出容器的文本 */
  height: 1.2rem; /* 匹配文本高度，避免容器高度跳动 */
}

.nav-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 固定居中，无需手动调值 */
  font-size: 0.85rem;
  padding-bottom: 3px;
  animation: text-scroll 10s infinite;
}

/* 第二个文本延迟一半动画时长，实现无缝交替 */
.nav-text:nth-child(2) {
  animation-delay: -5s; /* 负延迟让动画直接从中间阶段开始 */
  opacity: 0;
}

@keyframes text-scroll {
  /* 阶段1：停留显示 */
  0%, 20% {
    transform: translateX(-50%);
    opacity: 1;
  }
  /* 阶段2：向左移出屏幕并消失 */
  30%, 50% {
    transform: translateX(-150%);
    opacity: 0;
  }
  /* 阶段3：移动到右侧待命位置 */
  50.1%, 70% {
    transform: translateX(150%);
    opacity: 0;
  }
  /* 阶段4：从右侧移入并居中显示 */
  80%, 100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}

代码说明 #

• .nav-text-container作为父容器，负责裁剪超出的文本，同时提供定位基准
• 所有文本初始就通过left:50% + translateX(-50%)完美居中，彻底告别手动计算百分比的麻烦
• 动画分四个阶段：停留→移出→待命→移入，逻辑清晰且可调整
• 第二个文本用负延迟，直接让它的动画进度和第一个文本错开50%，实现无缝切换
• 位移用相对于自身宽度的百分比，不管屏幕多大，动画效果都一致

扩展技巧 #

• 如果要加更多文本，只需在容器里新增.nav-text元素，把animation-delay设为-10s/n（n是文本总数）即可
• 可以用CSS变量统一控制动画参数，方便后期修改：

:root {
  --ani-duration: 10s;
  --offset: 150%;
}

.nav-text {
  animation: text-scroll var(--ani-duration) infinite;
}

@keyframes text-scroll {
  30%, 50% {
    transform: translateX(calc(-50% - var(--offset)));
    opacity: 0;
  }
  50.1%, 70% {
    transform: translateX(calc(-50% + var(--offset)));
    opacity: 0;
  }
}

内容的提问来源于stack exchange，提问作者Thor The dog