幻灯片中每张幻灯片的持续时间不同

Question

我正在尝试仅使用 HTML 和 CSS 创建幻灯片。下面是我试过的代码。我想为每张幻灯片设置不同的秒数以移动到下一张幻灯片。例如：对于 img1,img2，它应该在 20 秒后移动到下一张幻灯片，对于 img3，它应该在 50 秒后移动到下一张幻灯片。是否可以仅使用 HTML 和 CSS（不使用 javascript）来做到这一点？

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
120% { left: -400%; }
}
* {
  box-sizing: border-box;
}
figure { 
  margin: 0;
  font-weight: 100;
}
div#captioned-gallery { 
  width: 100%; overflow: hidden; 
}
figure.slider {
  position: relative; width: 500%;
  font-size: 0; animation: 20s slidy infinite; 

figure.slider img { width: 100%; height: 250px; }
figure.slider figure figcaption.slideimg { 
position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: red;
    width: 100%;
    font-size: 2rem;
    padding: 6.6rem;
    text-align: center;
}

figcaption.slideimg1 { 
position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: red;
    width: 100%;
    font-size: 2rem;
     padding: 1rem;
    font-family:Helvetica;

}

<div id="captioned-gallery">
    <figure class="slider">
        <figure>
            <img src="img1.png" alt>
            <figcaption class="slideimg">Welcome!</figcaption>
        </figure>
        <figure>
            <img src="img2.png" alt>
            <figcaption class="slideimg" style="color:#ffffff;">Save the Date!<br/>></figcaption>
        </figure>
            
            <figure>
            <img src="img3.png" alt>
            <figcaption class="slideimg1">Objectives<br/>
            <ul>
            <li style="color:#ffffff;font-size:15px;padding:1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra condimentum egestas.</li>
            <li style="color:#ffffff;font-size:15px;padding:1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra condimentum egestas.</li>
            <li style="color:#ffffff;font-size:15px;padding:1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra condimentum egestas.</li>
            <li style="color:#ffffff;font-size:15px;padding:1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra condimentum egestas.</li>
            <li style="color:#ffffff;font-size:15px;padding:1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra condimentum egestas.</li>
            <li style="color:#ffffff;font-size:15px;padding:1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra condimentum egestas.</li>
    </ul></figcaption>
            
        </figure>
        <figure>
        <a href="" target="_blank">
            <img src="img4.png" alt>
            <figcaption class="slideimg">Loren<br/></figcaption></a>
        </figure>
        <figure>
            <img src="img4.png" alt>
            <figcaption class="slideimg">Welcome!</figcaption>
        </figure>
    </figure>
</div>