Question

我有一个CSS关键帧幻灯片放映，它从第五项切换到第一项的速度太快了。我不确定为什么会这样，但是当项目5滑到屏幕上时，您会注意到它会迅速切换回项目1。我希望将其显示的持续时间与其他时间相同。如果有什么办法可以完成最后一个项目，我将非常感谢您的帮助。

$id = '';

Answer 1

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

Answer 2

那是因为当遍历项目时，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>

@keyframes滑块过渡

2 个答案: