如何实现无卡顿无限循环的CSS Carousel？无需JavaScript

你的轮播出现卡顿是因为动画结束后会瞬间跳回初始位置，导致视觉断层。要实现无感知无限循环，只需调整容器宽度、动画位移参数，并移除不必要的过渡效果，具体修改如下：

修改后的CSS代码 #

.marquee-wrapper{
  background:#2F394C;
  text-align:center;
}
.marquee-wrapper .container{
  overflow:hidden;
}
.marquee-inner span{
  display:flex;
  gap:40px;
}
.marquee-wrapper .marquee-block{
  --item-width: 580px;
  --item-gap: 40px;
  --total-items: 5;
  /* 计算一组item的总宽度：item宽度*数量 + 间隙*(数量-1) */
  --group-width: calc(var(--item-width)*var(--total-items) + var(--item-gap)*(var(--total-items)-1));
  height: 150px;
  width: var(--group-width);
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  margin: 20px auto;
  background:#1B2531;
  padding: 30px 0;
}
.marquee-inner{
  display: flex;
  position: absolute;
  left: 0;
}
.marquee-item{
  width: 580px;
  height: auto;
  background:#00cc00;
}
.marquee-inner p{
  font-weight: 800;
  font-size: 30px;
  font-family: cursive;
}
.marquee-inner.to-left{
  animation: marqueeLeft 5s linear infinite;
}
.marquee-inner.to-right{
  animation: marqueeRight 5s linear infinite;
}
@keyframes marqueeLeft{
  0% {
    left: 0;
  }
  100% {
    /* 移动距离等于一组item的总宽度，让第二组刚好衔接第一组初始位置 */
    left: calc(-1*var(--group-width));
  }
}
@keyframes marqueeRight{
  0% { 
    left: calc(-1*var(--group-width));
  }
  100% {
    left: 0; 
  }
}

修改说明 #

• 用CSS变量统一管理item宽度、间隙和数量，方便后续调整
• 精确计算.marquee-block的宽度，使其刚好容纳一组完整的item，避免显示不全或多余空间
• 移除.marquee-item上的transition属性，该过渡会干扰轮播动画的流畅性
• 调整动画位移为一组item的总宽度，让动画结束时第二组内容刚好衔接第一组的初始位置，实现无缝循环

保留原HTML结构 #

你的HTML已经正确复制了两组相同的item，无需修改，确保两组内容完全一致即可实现无限循环的视觉效果。

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