CSS无限轮播动画异常问题求助

我参考了一个3张幻灯片的轮播示例，将其修改为5张幻灯片的版本。目前遇到的问题是：轮播首次可以完整循环显示1-5号幻灯片，但后续循环时会从第3张开始，不再显示1、2号幻灯片，每次循环均是如此。

我设置每张幻灯片停留时长为12s，每张幻灯片的animation-delay间隔4s，新增幻灯片时也对应增加了4s，我认为该设置是正确的。

HTML代码 #

<div id="slides">
    <div>
        <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Beautiful</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Amazing</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Incredible</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1715553176007-31923bd14f78?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
        <p>Wonderful</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1715314117855-3f070860d47f?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
        <p>Sweet</p>
    </div>
</div>

CSS代码 #

/* Slides */
#slides {
    max-width: 700px;
    position: relative;
    width: 100%;
}

#slides > * {
    animation: 12s autoplay infinite linear;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;  
}

/* Animation */
@keyframes autoplay {
    0% {
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    33.33% {
        opacity: 1;
    }
    37.33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

#slides > *:nth-child(1) {
    animation-delay: 0s;
}

#slides > *:nth-child(2) {
    animation-delay: 4s;
}

#slides > *:nth-child(3) {
    animation-delay: 8s;
}

#slides > *:nth-child(4) {
    animation-delay: 12s;
}

#slides > *:nth-child(5) {
    animation-delay: 16s;
}

#slides p {
    background: #ff0000;
    bottom: 0;
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transform: scale(-1);
    writing-mode: vertical-rl;
}

恳请各位帮忙解决这个问题！谢谢。

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