CSS实现动态溢出文本滚动动画教程

<div class="animated-container">
  <h3 class="animated-text">
    一些短文本
  </h3>
</div>
<span>此文本不应动画</span>

<br><br><br>

<div class="animated-container">
  <h3 class="animated-text">
    一些很长且需要动画才能完整显示的文本内容
  </h3>
</div>
<span>此文本应动画以显示全部内容</span>

.animated-container {
  position: relative; /* 为内部的绝对定位或相对定位提供参照 */
  white-space: nowrap; /* 确保文本不换行，从而产生溢出 */
  max-width: 200px; /* 容器的最大宽度，用于限制文本显示区域 */
  overflow: hidden; /* 隐藏溢出内容 */
  background: #0c0c0c; /* 背景色，方便观察 */
  display: inline-block; /* 允许设置宽度，并使其宽度适应内容（在max-width限制下） */
  width: fit-content; /* 宽度适应内容，但受max-width限制 */
}

.animated-text {
  color: #fff; /* 文本颜色 */
  animation: backAndForth 5s linear infinite; /* 应用动画 */
  display: inline-block; /* 允许设置宽度，并使其宽度适应内容 */
  position: relative; /* 为动画的transform和left属性提供定位上下文 */
}

@keyframes backAndForth {
  0% {
    transform: translateX(0); /* 初始位置，无位移 */
    left: 0; /* 初始左侧定位 */
  }
  10% {
    transform: translateX(0); /* 保持初始位置一段时间 */
    left: 0;
  }
  45% {
    /* 核心：计算溢出量并平移 */
    /* translateX(-100%) 将文本自身向左移动其自身宽度的100% */
    /* left: 100% 将文本的定位点移动到容器的右侧边缘 */
    /* 结合起来，实现了文本的“右对齐”效果，将溢出部分移入视图 */
    transform: translateX(calc(-100%));
    left: 100%;
  }
  55% {
    transform: translateX(calc(-100%)); /* 保持在最右侧可见位置一段时间 */
    left: 100%;
  }
  90% {
    transform: translateX(0); /* 移回初始位置 */
    left: 0;
  }
  100% {
    transform: translateX(0); /* 循环结束，回到初始位置 */
    left: 0;
  }
}