CSS Marquee类滚动动画求助：自定义代码未达预期效果

你的代码存在几个核心问题：

• 缺少带溢出隐藏的容器：滚动文本需要被限制在固定宽度且overflow:hidden的容器内，否则滚动效果无法在可视区域内呈现
• 关键帧位移计算逻辑错误：calc(-100% + 300px)里的100%指代滚动文本自身宽度，而非容器宽度，导致滚动距离不符合预期
• 动画收尾过渡突兀：从暂停位置直接跳回初始位置，没有平滑过渡逻辑

以下是修正后的完整实现：

1. HTML结构 #

<div class="scroll-container">
  <div class="scrolling-text">这是需要滚动的长文本内容，长度要超过容器宽度才能看到完整效果</div>
</div>

2. CSS代码 #

/* 容器：固定宽度，隐藏溢出内容 */
.scroll-container {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc; /* 方便查看容器范围，可按需删除 */
}

/* 滚动文本：强制不换行，确保宽度能超过容器 */
.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-text 10s linear infinite;
}

@keyframes scroll-text {
  0% {
    transform: translateX(0); /* 初始位置：文本左端对齐容器左端 */
  }
  70% {
    transform: translateX(calc(300px - 100%)); /* 滚动到文本右端对齐容器右端 */
  }
  90% {
    transform: translateX(calc(300px - 100%)); /* 暂停2秒（占总动画时长的20%） */
  }
  100% {
    transform: translateX(0); /* 平滑回到初始位置 */
  }
}

关键调整说明： #

• 新增scroll-container容器，通过overflow:hidden锁定可视区域，固定宽度可根据需求修改
• 给滚动文本添加white-space:nowrap，避免文本换行导致宽度无法超出容器
• 修正位移计算逻辑：calc(300px - 100%)中，300px是容器宽度，100%是文本自身宽度，确保滚动后文本右端刚好对齐容器右端
• 调整关键帧时间占比：延长暂停阶段的时长，让暂停效果更明显，可自行修改百分比调整各阶段时长

如果需要原生Marquee的循环滚动效果（文本滚出后从右侧重新进入），可以改用以下关键帧：

@keyframes scroll-text {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

这种模式下文本会持续从右向左滚动，滚出容器后自动从右侧重新出现，无需暂停逻辑。

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