html - CSS3无限循环回到第一张图片

Question

我有一个连续循环的 5 图片 css3 无限 slider (这里没有涉及 jQuery 或 JS，我也不想要任何)，但是一旦最后一张图片滑入到位，它就会跳回到第一张图片。我已尝试将第一张图片添加为组中的第六张图片，但这没有任何区别，有人可以查看我的 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 ％ 值(value)。尝试添加一个间隙，使 -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%。

更新返回开始

要返回开始，只需确保:

• 不同步骤的总和等于帧数 + 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>