如何在CSS关键帧百分比间设置延迟，实现图片1秒切换间隔？

你的核心需求是让每张图片停留1秒后切换，关键在于把动画时长和关键帧的百分比区间对应起来，确保每个图片占据相等的时长区间。

问题分析 #

原代码的动画时长是3秒，但关键帧只在0%、50%、100%三个点切换图片，导致第一张图显示1.5秒，第二张图显示1.5秒，第三张图刚出现就立刻切回第一张，完全没有停留时间，不符合需求。

修改后的代码 #

.imgWrapper{
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    /* background-image默认不支持过渡，若无需其他过渡效果可删除此行 */
    /* transition: 500ms; */
    /* 总时长3秒 = 3张图 × 1秒/张，linear保证匀速循环，infinite实现无限播放 */
    animation: imgChanger 3s linear infinite;
    width: 500px;
    height: 300px;
}
@keyframes imgChanger {
    /* 0% - 33.33%：显示第一张图，持续1秒 */
    0%, 33.33%{
        background-image: url(Images/superblog/superblog1.png);
    }
    /* 33.33% - 66.66%：显示第二张图，持续1秒 */
    33.33%, 66.66%{
        background-image: url(Images/superblog/superblog2.png);
    }
    /* 66.66% - 100%：显示第三张图，持续1秒 */
    66.66%, 100%{
        background-image: url(Images/superblog/superblog3.png);
    }
}

关键说明 #

• 总动画时长设为3秒，刚好匹配3张图各1秒的停留需求。
• 用区间百分比定义每个图片的显示时段：每个区间占总时长的1/3（≈33.33%），确保每张图在对应区间内保持显示，到区间结束点完成切换。
• 若需要平滑过渡效果，单纯background-image切换无法实现（CSS默认不支持背景图片渐变过渡），可考虑多层div叠加+opacity过渡的方案，但此方案超出当前需求范围。

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