纯CSS文字轮播问题：第二张幻灯片后所有幻灯片重叠，如何修复？

问题根源 #

你的动画时长设为16s，但4张幻灯片的延迟和关键帧时间分配没匹配上：原延迟设置让后两张幻灯片提前进场，关键帧的展示区间占比过大，导致前后幻灯片重叠。

修正后的代码 #

HTML（无需修改） #

<div class="slider">
    <p class="slide">30% to 60% off Sitewide  |  Extra 30% off Sale</p>
    <p class="slide">20% off Refer a Friend</p>
    <p class="slide">Extra 10% off on Prepaid Orders</p>
    <p class="slide">Clearance Sale is LIVE</p>
</div>

CSS（核心修改部分） #

.slider{
    position:relative;
    height:40px;
    padding:0 10px;
    background:#000;
    color:#fff;
    font-size:13px;
    overflow:hidden; /* 防止文字溢出容器 */
}

.slider .slide{
    position:absolute;
    animation:slider 16s cubic-bezier(1,0,0,1) infinite;
    transform:translateX(-5%);
    opacity:0;
    white-space: nowrap; /* 避免文字换行打乱布局 */
}

.slider.paused .slide{animation-play-state:paused}

/* 每张幻灯片延迟=总时长/幻灯片数量=16s/4=4s */
.slider .slide:nth-child(2){animation-delay:4s}
.slider .slide:nth-child(3){animation-delay:8s}
.slider .slide:nth-child(4){animation-delay:12s}

@keyframes slider{
    0%{transform:translateX(-5%);opacity:0}
    /* 4张均分100%周期，每张占25%，调整展示区间避免重叠 */
    5%,20%{transform:translateX(0);opacity:1} /* 稳定展示阶段 */
    25%,100%{transform:translateX(5%);opacity:0} /* 退场+等待阶段 */
}

jQuery（无需修改） #

$(".slider").hover(
    function(){
        $(this).toggleClass("paused");
    }
);

关键修改说明 #

1. 延迟匹配周期：总时长16s，4张幻灯片每张的展示周期为4s，延迟依次递增4s，确保前一张完全退场后下一张才进场。
2. 关键帧时间重分配：把100%动画周期均分给4张幻灯片，每张占25%，缩小展示区间占比，避免前后幻灯片的进场/退场阶段重叠。
3. 补充布局样式：添加overflow:hidden和white-space: nowrap，避免文字溢出或换行导致的布局混乱。

原代码重叠原因 #

• 原第3、4张幻灯片的延迟（12s、16s）和总动画时长（16s）冲突，第4张延迟16s后会和第1张同时启动。
• 原关键帧的展示区间（7.5%-33%）占比超过单张幻灯片应有的25%周期，前一张还在展示时，后一张已经进场，导致重叠。

内容的提问来源于stack exchange，提问作者Chotu Kaalia