如何实现CSS轮播动画自动重启、达到无限循环播放效果

问题原因 #

你的动画只能运行一次核心有两个问题：

1. 动画规则里加了forwards属性，动画执行完最后一帧就会停住
2. 拆分了4个独立的单次动画，没有设置无限循环属性，也没有把完整轮播周期整合为可重复执行的逻辑

解决方法 #

推荐把多段动画合并为单个完整周期的关键帧动画，直接设置无限循环即可，修改slider.css中对应代码如下：

.slider{
    display: flex;
    width: 100%;
    height: 37vh;
    overflow: hidden;
}
.slider img{
    min-width: 100%;
    min-height: 100%;
    /* 总时长16s可自行调整，infinite代表无限循环 */
    animation: slide 16s infinite linear;
    transform: translate(0%);
}
@keyframes slide {
    /* 停留第一张 */
    0% { transform: translate(0%); }
    20% { transform: translate(0%); }
    /* 切换到第二张 */
    25% { transform: translate(-100%); }
    /* 停留第二张 */
    45% { transform: translate(-100%); }
    /* 切换到第三张 */
    50% { transform: translate(-200%); }
    /* 停留第三张 */
    70% { transform: translate(-200%); }
    /* 切换到第四张 */
    75% { transform: translate(-300%); }
    /* 停留第四张 */
    95% { transform: translate(-300%); }
    /* 切回第一张完成循环 */
    100% { transform: translate(0%); }
}

你可以调整关键帧的百分比占比，来修改每张图的停留时长和切换速度，比如要延长停留时间就增加对应停留区间的百分比数值，要加快切换速度就缩小切换区间的百分比差值。

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