如何在纯css3滑块中计算10张幻灯片的百分比

我有一个项目，其中一个纯css3滑块处理5个图像和关键帧计算，如下面的css脚本所述。我想将其增加到10张图像，并尝试播放关键帧，但无法使其正常工作。在此方面的任何帮助都将不胜感激

html:

CSS3关键帧：

@keyframes slidy {
    0% { left: 0%; }
    10% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

---

我不知道你的图像的大小，但下面是一个使用150px宽图像的示例。希望这有帮助

正文{
填充：0；
保证金：0；
}
figure.slider{
位置：相对位置；
宽度：1500px；
字号：0；
显示器：flex；
动画：30秒滑无限；
保证金：0；
}
图.滑块图{
宽度：150px；
显示：内联块；
职位：继承；
保证金：0；
填充：0；
}
@滑动关键帧{
0% {
左：0；
}
10% {
左：-150px；
}
20% {
左：-300px；
}
30% {
左：-450px；
}
40% {
左：-600px；
}
50% {
左：-750px；
}
60% {
左：-900px；
}
70% {
左：-1050px；
}
80% {
左：-1200px；
}
90% {
左：-1350px；
}
100% {
左：-1500px；
}
}

---

我只需更改图像大小

figure.slider {
     position: relative;
     width: 1000%;
     font-size: 0;
     animation: 30s slidy infinite;
}
 figure.slider figure {
     width: 10%;
     height: auto;
     display: inline-block;
     position: inherit;
}
 figure.slider img {
     width: 80%;
     height: auto;
}
 figure.slider figure figcaption {
     position: absolute;
     bottom: 0;
     background: rgba(0,0,0,0.4);
     color: #fff;
     width: 100%;
     font-size: 2rem;
     padding: .6rem;
}

@keyframes slidy {
    0% { left: 0%; }
    10% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}