Переход слайдера @keyframes

У меня есть слайд-шоу css keyframes, которое слишком быстро переключилось с 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; 
}