如何用CSS实现流畅的无限循环Marquee跑马灯？

问题描述 #

尝试用CSS实现无限循环Marquee跑马灯，需求是当一个盒子移出屏幕时，新盒子从左侧进入，始终保持屏幕上有盒子且滚动流畅。但当前代码效果不符合预期：当第10个盒子移出后，循环会突然回退，无法流畅滚动。

现有HTML代码 #

<div class="marquee">
    <div class="slide">
        <div class="box"></div>
        <!-- 正式代码中有20个.box元素 -->
    </div>
</div>

现有CSS代码 #

.marquee{
    display: flex;
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
}
.slide{
    white-space: nowrap;
    will-change: transform;
    animation: marquee 4s linear infinite;
    display: flex;
}
@keyframes marquee {
    from{transform:translateX(-10%);}
    to{transform:translateX(+10%) ;}
}
.box{
    width: 150px;
    height: 150px;
    border: 2px solid #000;
    border-radius: 10px;
    margin-right: 15px;
    margin-left: 15px;
}

修复方案 #

当前问题核心是动画起始/结束状态无法无缝衔接，且内容量不足以支撑视觉连续性。通过以下两步解决：

• 复制内容组，消除视觉断裂：在.slide内复制一份所有.box元素，让第一组内容滚出屏幕时，第二组内容刚好衔接，避免空白或回退。
• 精准设置动画位移：动画位移值等于单个内容组的总宽度，让动画结束位置与起始位置视觉完全一致，实现无缝循环。

修改后的完整代码 #

HTML代码

<div class="marquee">
    <div class="slide">
        <!-- 原有的20个.box元素 -->
        <div class="box"></div>
        <div class="box"></div>
        <!-- 复制一份相同的20个.box元素 -->
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS代码

.marquee{
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
}
.slide{
    display: flex;
    will-change: transform;
    /* 动画时长按需调整，内容越多可适当拉长 */
    animation: marquee 15s linear infinite;
}
/* 单个内容组总宽度：20*(150px宽度 + 15px左margin +15px右margin) = 3600px */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-3600px);
    }
}
.box{
    width: 150px;
    height: 150px;
    border: 2px solid #000;
    border-radius: 10px;
    margin: 0 15px;
}

关键说明 #

• 复制内容组是为了保证滚动到末尾时，后续内容与开头完全一致，视觉上无断裂感。
• 位移值必须精确匹配单个内容组的总宽度，否则动画循环时会出现跳变。
• 动画时长可根据需求调整，追求慢滚动效果就拉长时长，反之则缩短。

内容的提问来源于stack exchange，提问作者Samet Seçer