css - @keyframes slider 过渡

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>