CSS3无限循环返回到第一张图像

Question

我有一个5个图像css3无限滑块，这是一个连续的循环(这里没有jQuery或JS涉及，我也不想要任何)，但是一旦最后一个图像滑到位置它跳回第一个图像。我已经尝试添加第一张图像作为组中的第6张图像，但这没有任何区别，有人可以看看我的CSS3计算，看看我做错了什么?

HTML

<div id="slider">
<figure>
        <img src="banner01.jpg" alt="">
        <img src="banner02.jpg" alt="">
        <img src="banner03.jpg" alt="">
        <img src="banner04.jpg" alt="">
        <img src="banner05.jpg" alt="">
</figure>
</div>

CSS3

@keyframes slidr {
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; width:710px; height:300px; float:center; margin:auto; }
div#slider figure img {float: left; }
div#slider figure { 
  position: relative;
  height:100%;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidr; 
  transition:.7s;
}

Thanks in advance

Answer 1

您的100%部分的动画- -400%值-实际上只被显示恰好…0秒后，它被重新缠绕到0%的值。尝试添加一个间隙，使-400%值保持更长时间的活动:

@keyframes slidr {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  85% { left: -300%; }
  90% { left: -400%; }
  100% { left: -400%; }
}
/* Sorry, I'm on Safari */
@-webkit-keyframes slidr {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  85% { left: -300%; }
  90% { left: -400%; }
  100% { left: -400%; }
}
body { 
  margin: 0; 
} 
div#slider { 
  overflow: hidden; 
  width:710px; 
  height:300px; 
  /* I dont think this is actually a thing: */
  float:center; 
  margin:auto; 
}
div#slider figure img {
    float: left;
}
div#slider figure { 
  position: absolute;
  height:100%;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  /* And again, I'm on Safari. Also, speed it up for development purposes. */
  -webkit-animation: 10s slidr infinite; 
  animation: 10s slidr infinite; 
  transition:.7s;
}
img {
  width: 100vw;
  height: 400px;
}

<div id="slider">
<figure>
        <img src="http://placehold.it/350x150" alt="">
        <img src="http://placehold.it/350x150" alt="">
        <img src="http://placehold.it/350x150" alt="">
        <img src="http://placehold.it/350x150" alt="">
        <img src="http://placehold.it/350x150" alt="">
</figure>
</div>

注意，它实际上将拉回0，而不是动画。如果您愿意，您可以通过添加另一个将左侧值恢复为0%的间隙来再次创建过渡。

更新返回起点

要返回开始，只需确保:

• 不同步数的总和等于frames + 1
• 最后一步和第一步从0开始

在SASS中，我们可以很容易地自动化这个过程:

@mixin keyframes-slider($name, $frames){
    // Create keyframes wrapper
    @keyframes #{$name} {
        // Loop through the amount of frames (-1)
        @for $i from 0 through ($frames - 1) {
            // Divide the 100% by the amount of frames
            // The first frame is 0, and the last will return to 0
            #{100% / $frames * $i} { left: -100% * $i; }
        }
        // Add the final frame
        100% { left: 0; }
    }
}

简单地使用它，包括它，它会生成你想要的关键帧:

@include keyframes-slider(slidr, 8);

作为一个例子(用8预先生成):

/* Thos following is my compressed SASS output. */
@-webkit-keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}@keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}
/* This is a quick way to give a good example. */
ul {
  width: 800px;
  height: 100px;
  padding: 0;
  margin: 0;
  list-style: none;
  -webkit-animation: slidr 10s infinite;
  animation: slidr 10s infinite;
  position: absolute;
  left: 0;
  top: 0;
}
div, li {
  width: 100px;
  height: 100px;
  float: left;
  font-size: 30px;
  background: #ececec;
}
li:nth-child(2n){
  background: #dd0300;
}
div {
  position: relative;
   overflow: hidden; 
}

<div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</div>