CSS关键帧淡入轮播调整：单图完成首次动画后停止的实现方案

内页可使用独立的代码实现需求，无需修改首页原有轮播逻辑，具体调整如下： #

内页HTML代码 #

仅保留需要展示的单张图片节点即可：

<div class="slide">
    <div style="background-image:url(替换为你的单张图片链接)"></div>
</div>

内页CSS代码 #

调整动画规则，取消无限循环、设置动画结束后保持最终状态，同时修改关键帧避免图片消失：

.slide {
    background: #fff;
    height: 350px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slide > div {
    /* 仅播放1次动画，结束后保持最后一帧状态 */
    animation: singleSlide 4s forwards 1;
    background-position: center center;
    background-size: cover;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
}

/* 重写单图场景的关键帧，保留原有的渐显+缩放入场效果，最终保持图片可见 */
@keyframes singleSlide {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

核心修改说明 #

• 移除原有动画配置中的infinite属性，替换为forwards 1，实现单次播放后停留在最终画面
• 调整关键帧终点状态为opacity:1，避免动画结束后回到初始的透明状态
• 移除多图场景下的nth-child延迟配置，减少冗余代码

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