代码之家 › 专栏 › 技术社区 › Travis Martin

@关键帧滑块过渡

transition gallery css-animations css

Travis Martin · 技术社区 · 6 年前

我有一个css关键帧幻灯片,从第五个项目切换到第一个太快。我不知道为什么会这样,但你会注意到当项目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; 
}

2 回复 | 直到 6 年前

Saeed 6 年前

这是因为当在项目中循环时,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>

Mikhail Vasiltsev 6 年前

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