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