如何解决CSS新闻跑马灯过渡卡顿及循环间隙问题？

问题根源 #

1. 无缝循环失效：原动画使用百分比位移，动画结束后元素瞬间跳回初始位置，导致间隙；且无重复内容衔接，无法实现视觉上的无缝过渡。
2. 动画不流畅：动画时长过短（5s）导致移动速度过快，视觉上产生卡顿；缺少浏览器性能优化提示，无法充分利用硬件加速。

修复方案 #

1. 实现无缝循环 #

• 复制一份.hitem内容到.hmove中，形成内容重复衔接
• 调整动画位移距离为单个.hmove的实际总宽度（而非百分比），让第一组内容完全移出容器时，复制的第二组刚好衔接到位

2. 优化动画流畅度 #

• 延长动画时长，根据内容总量调整（示例用15s，可按需修改）
• 添加will-change: transform提示浏览器提前优化动画渲染
• 确保.hmove宽度为所有.hitem宽度之和，避免布局错乱

修改后的完整代码 #

CSS

.hwrap {
  overflow: hidden;
  background: #eee;
}

.hmove {
  display: flex;
  will-change: transform; /* 提示浏览器优化动画性能 */
  animation: tickerh linear 15s infinite; /* 延长时长提升流畅度 */
}

.hitem {
  flex-shrink: 0;
  width: 500px;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}

@keyframes tickerh {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* 位移距离为单个.hmove的总宽度（6个hitem × 500px = 3000px） */
    transform: translate3d(-3000px, 0, 0);
  }
}

.hmove:hover {
  animation-play-state: paused;
}

HTML

<div class="hwrap">
  <div class="hmove">
    <div class="hitem">
      <p>"Imagination is more important than knowledge. For knowledge is limited, whereas imagination embraces the entire world, stimulating progress, giving birth to evolution."</p>
      <p>-Albert Einstein</p>
    </div>
    
    <div class="hitem">
      <p> "You may encounter many defeats, but you must not be defeated. In fact, it may be necessary to encounter the defeats so you can know who you are, what you can rise from, how you can still come out of it."</p>
      <p>-Maya Angelou</p>
    </div>
    
    <div class="hitem">
      <p>"Education is the most powerful weapon which you can use to change the world. It has the power to transform individuals, communities, and nations, creating a brighter and more equitable future for all."</p>
      <p>-Nelson Mandela</p>
    </div>
    
    <div class="hitem">
      <p> "The biggest adventure you can take is to live the life of your dreams. Don't be afraid to take risks, embrace your passions, and pursue what truly sets your soul on fire."</p>
      <p>-Oprah Winfrey</p>
    </div>
    
    <div class="hitem">
      <p>"Be the change that you wish to see in the world. Small acts of kindness and compassion can ripple through society, inspiring others to join the movement towards a more peaceful and just world."</p>
      <p>-Mahatma Gandhi</p>
    </div>
    
    <div class="hitem">
      <p> "Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that. Let us choose love over hate and strive for a world where justice and equality prevail."</p>
      <p>-Martin Luther King Jr.</p>
    </div>
    <!-- 复制内容实现无缝衔接 -->
    <div class="hitem">
      <p>"Imagination is more important than knowledge. For knowledge is limited, whereas imagination embraces the entire world, stimulating progress, giving birth to evolution."</p>
      <p>-Albert Einstein</p>
    </div>
    
    <div class="hitem">
      <p> "You may encounter many defeats, but you must not be defeated. In fact, it may be necessary to encounter the defeats so you can know who you are, what you can rise from, how you can still come out of it."</p>
      <p>-Maya Angelou</p>
    </div>
    
    <div class="hitem">
      <p>"Education is the most powerful weapon which you can use to change the world. It has the power to transform individuals, communities, and nations, creating a brighter and more equitable future for all."</p>
      <p>-Nelson Mandela</p>
    </div>
    
    <div class="hitem">
      <p> "The biggest adventure you can take is to live the life of your dreams. Don't be afraid to take risks, embrace your passions, and pursue what truly sets your soul on fire."</p>
      <p>-Oprah Winfrey</p>
    </div>
    
    <div class="hitem">
      <p>"Be the change that you wish to see in the world. Small acts of kindness and compassion can ripple through society, inspiring others to join the movement towards a more peaceful and just world."</p>
      <p>-Mahatma Gandhi</p>
    </div>
    
    <div class="hitem">
      <p> "Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that. Let us choose love over hate and strive for a world where justice and equality prevail."</p>
      <p>-Martin Luther King Jr.</p>
    </div>
  </div>
</div>

额外说明 #

• 若后续修改.hitem数量或宽度，需同步调整动画中的位移距离（总宽度 = 单个hitem宽度 × 数量）
• 动画时长可按需调整，时长越长移动越平缓，流畅度越好
• will-change: transform会让浏览器提前为动画分配资源，提升渲染性能

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