纯CSS实现滑动轮播动画时div重叠、关键帧时序错误问题求解

纯CSS完全可以实现你要的轮播效果，不需要依赖JavaScript或jQuery。

原有代码问题排查 #

• 时长配置逻辑错误：你设置单轮动画总时长为50s、子元素延迟间隔10s，折算下来单个元素停留时间仅10s左右，远达不到要求的50s，且时序错位会导致多个元素同时进入视口发生重叠
• 关键帧占比不匹配：5个子元素平分单轮周期的话，每个元素仅应占用20%的动画时长完成滑入、停留、滑出动作，你原有关键帧在37.33%就将元素移到视口外，剩余周期的状态和延迟规则没有对齐
• 定位规则冲突：你给.box1~.box4及footer单独设置了position: relative和margin属性，覆盖了父容器下通用选择器定义的绝对定位规则，导致部分元素定位失效
• 缓动函数选择错误：ease-in-out会让动画全程带加减速效果，元素停留阶段也会出现缓慢位移，不符合静止展示的需求

实现思路 #

• 先计算准确时长：假设滑动切换的过渡时间为2s，每个元素停留50s，单个元素占用周期为52s，5个元素的单轮总动画时长为52 * 5 = 260s
• 统一定位规则：移除各个子元素单独设置的定位、margin属性，统一给所有.container的直接子元素设置绝对定位、撑满容器宽高，初始位置放在容器可视区域下方
• 校准关键帧：每个元素的动画仅在自己占用的20%周期内完成动作：周期起始位置在容器下方，前1/26的时间（对应2s过渡）滑入到可视区，保持静止到周期的92%位置（对应停留50s），再用1/26的时间滑出到容器上方，剩余周期保持在视口外
• 对齐动画延迟：第n个子元素的动画延迟设置为(n-1)*52s，保证前一个元素完全滑出后，下一个元素刚好开始滑入
• 容器保留overflow: hidden隐藏视口外元素，动画使用linear缓动，保证停留阶段元素完全静止

修正后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .box1 {
            background: red;
        }
        .box2 {
            background: green;
        }
        .box3 {
            background: blue;
        }
        .box4 {
            background: orange;
        }
        footer {
            width: 100%;
            height: 100px;
            background: black;
        }
        .container {
            border: 5px solid yellow;
            height: 18em;
            position: relative;
            overflow: hidden;
            width: 1000px;
        }
        .container>* {
            position: absolute;
            width: 100%;
            top: 100%;
            left: 0;
            margin: 0;
            /* 总时长260s，无限循环，线性缓动 */
            animation: 260s autoplay infinite linear;
        }
        @keyframes autoplay {
            /* 初始在容器下方 */
            0% {
                top: 100%;
            }
            /* 2s滑入到可视区 */
            0.77% { /* 2/260 ≈ 0.77% */
                top: 0;
            }
            /* 停留50s */
            19.23% { /* 50/260 ≈ 19.23% */
                top: 0;
            }
            /* 2s滑出到容器上方 */
            20% { /* 52/260 = 20% */
                top: -100%;
            }
            /* 剩余时间保持在视口外 */
            100% {
                top: -100%;
            }
        }
        /* 按单元素周期设置延迟 */
        .container>*:nth-child(1) {
            animation-delay: 0s;
        }
        .container>*:nth-child(2) {
            animation-delay: 52s;
        }
        .container>*:nth-child(3) {
            animation-delay: 104s;
        }
        .container>*:nth-child(4) {
            animation-delay: 156s;
        }
        .container>*:nth-child(5) {
            animation-delay: 208s;
        }
    </style>
</head>
<body>
    <h1>Auto Slide Animation</h1>
    <div class="container">
        <div class="box1">
            <h3>So What is This About?</h3>
            <p>In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec eros in neque aliquam efficitur. Duis pulvinar efficitur iaculis. Fusce luctus ac dolor ac tincidunt. Sed porta a sapien vitae volutpat. Fusce elementum enim sit amet sodales consequat. Curabitur eget nisl lacus. Mauris vitae eleifend nisl. Sed commodo massa ac ex bibendum, ornare vehicula lectus maximus. Suspendisse vitae imperdiet tortor.</p>
            <p>Aenean posuere quam turpis, ut convallis erat egestas sed. Morbi blandit diam at orci tincidunt, quis vehicula ipsum dapibus. Nunc ut dolor metus. Phasellus ullamcorper ex mi, nec euismod elit hendrerit sit amet. Mauris elementum vitae felis sed blandit. Phasellus sed hendrerit nisi. Morbi eu leo porta leo vehicula fermentum ut nec dolor. Aenean porta bibendum turpis nec fringilla. Donec non accumsan mi. Etiam egestas urna a sollicitudin sagittis.</p>
        </div>
        <div class="box2">
            <h3>Participation</h3>
            <p>In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec eros in neque aliquam efficitur. Duis pulvinar efficitur iaculis. Fusce luctus ac dolor ac tincidunt. Sed porta a sapien vitae volutpat. Fusce elementum enim sit amet sodales consequat. Curabitur eget nisl lacus. Mauris vitae eleifend nisl. Sed commodo massa ac ex bibendum, ornare vehicula lectus maximus. Suspendisse vitae imperdiet tortor.</p>
            <p>Aenean posuere quam turpis, ut convallis erat egestas sed. Morbi blandit diam at orci tincidunt, quis vehicula ipsum dapibus. Nunc ut dolor metus. Phasellus ullamcorper ex mi, nec euismod elit hendrerit sit amet. Mauris elementum vitae felis sed blandit. Phasellus sed hendrerit nisi. Morbi eu leo porta leo vehicula fermentum ut nec dolor. Aenean porta bibendum turpis nec fringilla. Donec non accumsan mi. Etiam egestas urna a sollicitudin sagittis.</p>
        </div>
        <div class="box3">
            <p>In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec eros in neque aliquam efficitur. Duis pulvinar efficitur iaculis. Fusce luctus ac dolor ac tincidunt. Sed porta a sapien vitae volutpat. Fusce elementum enim sit amet sodales consequat. Curabitur eget nisl lacus. Mauris vitae eleifend nisl. Sed commodo massa ac ex bibendum, ornare vehicula lectus maximus. Suspendisse vitae imperdiet tortor.</p>
        </div>
        <div class="box4">
            <h3>Requirements</h3>
            <p>In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec eros in neque aliquam efficitur. Duis pulvinar efficitur iaculis. Fusce luctus ac dolor ac tincidunt. Sed porta a sapien vitae volutpat. Fusce elementum enim sit amet sodales consequat. Curabitur eget nisl lacus. Mauris vitae eleifend nisl. Sed commodo massa ac ex bibendum, ornare vehicula lectus maximus. Suspendisse vitae imperdiet tortor.</p>
            <p>Aenean posuere quam turpis, ut convallis erat egestas sed. Morbi blandit diam at orci tincidunt, quis vehicula ipsum dapibus. Nunc ut dolor metus. Phasellus ullamcorper ex mi, nec euismod elit hendrerit sit amet. Mauris elementum vitae felis sed blandit. Phasellus sed hendrerit nisi. Morbi eu leo porta leo vehicula fermentum ut nec dolor. Aenean porta bibendum turpis nec fringilla. Donec non accumsan mi. Etiam egestas urna a sollicitudin sagittis.</p>
            <p>Aenean posuere quam turpis, ut convallis erat egestas sed. Morbi blandit diam at orci tincidunt, quis vehicula ipsum dapibus. Nunc ut dolor metus. Phasellus ullamcorper ex mi, nec euismod elit hendrerit sit amet. Mauris elementum vitae felis sed blandit.</p>
        </div>
        <footer></footer>
    </div>
</body>
</html>

如果需要调整滑动速度，只需要修改过渡时长，重新计算总动画时长、关键帧百分比和延迟时间即可。

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