同一行多线性动画问题：首个动画未从页面外启动

问题核心 #

你需要实现两个接续播放的线性动画，第二个延迟5秒启动，但目前第一个动画从页面内（0vw位置）开始，无法达到“从页面外进入”的效果。

修改方案 #

• 调整动画起始位置：让元素初始时完全处于页面外部，用transform: translateX()实现位移（比right属性性能更好，不会触发页面重排）
• 合并重复关键帧：两个元素共用同一动画，仅通过animation-delay区分播放时机
• 优化容器布局：设置容器为相对定位并隐藏溢出，避免页面外元素显示

修改后的完整代码 #

CSS #

.announcement {
  position: relative;
  width: 100vw;
  height: 2rem;
  overflow: hidden; /* 隐藏页面外的元素 */
}

.announce, .announce2 {
  font-size: 1.3rem;
  position: absolute;
  white-space: nowrap; /* 防止文本换行打乱动画轨迹 */
  right: 0;
  animation: slideLeft 15s linear infinite;
}

.announce2 {
  animation-delay: 5s; /* 延迟5秒启动第二个动画 */
}

@keyframes slideLeft {
  from {
    transform: translateX(100%); /* 初始状态：元素完全在页面右侧外部 */
  }
  to {
    transform: translateX(-100%); /* 结束状态：元素完全在页面左侧外部 */
  }
}

HTML #

<div class="announcement">
  <div class="announce">Hello</div>
  <div class="announce2">Hello</div>
</div>

关键细节说明 #

• overflow: hidden：确保动画过程中，页面外的元素不会显示在容器外
• white-space: nowrap：避免文本换行导致元素宽度变化，保证动画轨迹一致
• position: absolute：让两个元素脱离文档流，沿同一水平轨迹移动，互不干扰
• transform: translateX()：基于CSS变换的动画性能更优，不会引发浏览器重排重绘

内容的提问来源于stack exchange，提问作者pelotador.1