Html 如何修复CSS旋转木马？

我试图制作一个包含三张幻灯片的CSS旋转木马，但遇到了一个问题。在最后一次迭代中，转盘转移到空白页。我怎样才能解决这个问题？我怀疑这与关键帧有关

HTML

<div class="carousel">
   <ul class="panes">
      <li>
         <div class='text'>First</div>
      </li>
      <li>
         <div class='text'>Second</div>
      </li>
      <li>
         <div class='text'>Third</div>
      </li>
   </ul>
</div>

---

我个人发现一个网站显示了一个完全流畅且响应迅速的CSS旋转木马，并分享了它的代码。 看看这个：

此人使用的关键帧与您使用的关键帧之间存在差异，您可以查看以下内容：

@keyframes carousel{
0%    { left:0; }
11%   { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25%   { left:-200%; }
36%   { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50%   { left:-400%; }
61%   { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75%   { left:-200%; }
86%   { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100%  { left:0; }

---

}在

左侧的
css属性上，不要超过-200%。我用15秒和更少的关键帧创建了一个类似的版本。动画与您的动画不同，但它将向您显示，使用-200%就足以使用三个滑块。如果添加更多滑块，则需要添加更多%

以下是链接：

body，div，ul，li{
保证金：0；
左侧填充：0px；
}
旋转木马{
溢出x：隐藏；
宽度：100%；
位置：相对位置；
}
.窗格玻璃{
列表样式：无；
位置：相对位置；
宽度：300%；
动画：旋转木马30s无限；
}
.panes>li{
位置：相对位置；
浮动：左；
宽度：33.3333%；
}
.carousel.text{
显示：块；
宽度：100%；
最大宽度：100%；
}
@关键帧旋转木马{
0%{左：0；}
11%{左：0；}
22%{左：-100%；}
33%{左：-100%；}
44%{左：-200%；}
55%{左：-200%；}
66%{左：-100%；}
77%{左：-100%；}
88%{左：0；}
99%{左：0；}
}



弗斯特


第二


第三


谢谢你，伙计；）不客气！如果答案对您有效，请检查答案是否正确；）非常感谢！
@keyframes carousel{
0%    { left:0; }
11%   { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25%   { left:-200%; }
36%   { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50%   { left:-400%; }
61%   { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75%   { left:-200%; }
86%   { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100%  { left:0; }