如何实现文本在X轴指定区间内移动而非全屏往返？CSS语法问询

这个需求很常见，要让文本只在div a和div b之间移动，核心是把动画的移动范围从整个视口改成基于这两个边界元素的位置来计算。我给你调整后的完整代码和关键说明：

完整代码示例 #

HTML结构 #

<div class="holder">
  <!-- 左边界 div a -->
  <div class="boundary boundary-a">Div A</div>
  <!-- 需要移动的文本容器 -->
  <div class="news">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <!-- 右边界 div b -->
  <div class="boundary boundary-b">Div B</div>
</div>

CSS样式 #

/* 容器：作为定位参考，隐藏超出内容 */
.holder {
  position: relative;
  overflow: hidden;
  height: 40px; /* 自定义高度，适配内容 */
  background-color: #f5f5f5;
}

/* 通用边界样式：固定在容器两侧 */
.boundary {
  position: absolute;
  top: 0;
  width: 100px; /* 自定义边界宽度，可按需修改 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e0e0e0; /* 可视化边界，不需要可删除 */
}

/* 左边界 div a */
.boundary-a {
  left: 0;
}

/* 右边界 div b */
.boundary-b {
  right: 0;
}

/* 移动的文本 */
.news {
  position: absolute;
  top: 0;
  display: inline-block;
  white-space: nowrap;
  line-height: 40px; /* 和容器高度一致，实现垂直居中 */
  /* 用CSS变量统一管理边界宽度，方便后续修改 */
  --boundary-width: 100px;
  /* 动画：在两个边界之间线性移动，无限循环 */
  animation: moveBetweenBounds 10s linear infinite;
}

/* 动画关键帧：限制移动范围在两个边界之间 */
@keyframes moveBetweenBounds {
  0% {
    /* 起始位置：文本左端对齐右边界的左侧 */
    transform: translate(calc(100% - var(--boundary-width)), 0);
  }
  100% {
    /* 结束位置：文本右端对齐左边界的右侧 */
    transform: translate(calc(-100% + var(--boundary-width)), 0);
  }
}

关键调整说明 #

• 定位参考：给.holder设置position: relative，让内部的边界和文本都以容器为定位基准，脱离视口的限制。
• 边界控制：用绝对定位把div a和div b固定在容器的左右两侧，作为移动的边界。如果不需要显示边界，只需要保留width和定位属性，去掉背景色即可。
• 动画范围计算：用calc()结合CSS变量，精准计算动画的起始和结束位置，确保文本始终在两个边界之间移动，不会超出范围。
• 替换原有逻辑：你原来的代码使用100vw（整个视口宽度）和-100%（文本自身宽度），导致文本在整个屏幕往返，现在改成基于容器和边界的计算，就实现了指定区域内的移动。

内容的提问来源于stack exchange，提问作者user16242098