@keyframes 滑块过渡

Question

我有一个 css 关键帧幻灯片，从第 5 项切换到第 1 项太快了。我不确定为什么会发生这种情况，但您会注意到当项目 5 滑到屏幕上时，它会快速切换回项目 1。我希望它的显示时间与其他时间相同。如果有任何方法可以保持最后一个项目，我将非常感谢您的帮助。

<div id="slider">
<figure>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 1</div>
</div>
</div>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 2</div>
</div>
</div>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 3</div>
</div>
</div>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 4</div>
</div>
</div>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 5</div>
</div>
</div>
</figure>
</div>

@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%; }
}

body { margin: 0; } 

div#slider { overflow: hidden; }

div#slider figure .page { width: 100vw; float: left; }

div#slider figure { 
position: relative;
width: 500vw;
margin: 0;
left: 0;
text-align: left;
font-size: 10;
animation: 30s slidy infinite; 
}

.page {
display: flex; 
justify-content: center; 
}

.project {
display: flex; 
align-items: center; 
}

Answer 1

这是因为当循环遍历项目时，100% 和 0% 之间的差异只有 1%，所以动画必须在持续时间的 1% 内发生。只需平均划分持续时间（百分比）即可解决问题。

@keyframes slidy {
0% { left: 0%; }
10% { left: 0%; }
20% { left: -100%; }
30% { left: -100%; }
40% { left: -200%; }
50% { left: -200%; }
60% { left: -300%; }
70% { left: -300%; }
80% { left: -400%; }
90% { left: -400%; }
}

body { margin: 0; } 

div#slider { overflow: hidden; }

div#slider figure .page { width: 100vw; float: left; }

div#slider figure { 
position: relative;
width: 500vw;
margin: 0;
left: 0;
text-align: left;
font-size: 10;
animation: 30s slidy infinite; 
}

.page {
display: flex; 
justify-content: center; 
}

.project {
display: flex; 
align-items: center; 
}

<div id="slider">
<figure>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 1</div>
</div>
</div>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 2</div>
</div>
</div>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 3</div>
</div>
</div>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 4</div>
</div>
</div>
<div class="page">
<div class="project">
  <div class="col project-img">
    <img src="https://via.placeholder.com/350x350">
  </div>
  <div class="col project-info">info 5</div>
</div>
</div>
</figure>
</div>

Answer 2

@keyframes slidy {
0% { left: 0%; }
15% { left: 0%; }
20% { left: -100%; }
35% { left: -100%; }
40% { left: -200%; }
55% { left: -200%; }
60% { left: -300%; }
75% { left: -300%; }
80% { left: -400%; }
95% { left: -400%; }
}