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

提前致谢

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>