html - 纯 CSS3 幻灯片重复最后 4 张幻灯片？

Question

我找到了一个脚本，即:“Pure CSS / CSS3 Slideshow with Image Panning and zooming Effect”。

问题是它重复了最后 4 张幻灯片。谁能告诉我为什么以及如何解决这个问题？

My first fiddle, demonstrating the issue .

My second one, proving the issue .

HTML:

<div class="pic-wrapper lejatszokep">
    <figure class="pic-1"></figure>
    <figure class="pic-2"></figure>
    <figure class="pic-3"></figure>
    <figure class="pic-4"></figure>
    <figure class="pic-5"></figure>
    <figure class="pic-6"></figure>
    <figure class="pic-7"></figure>
    <figure class="pic-8"></figure>
    <figure class="pic-9"></figure>
    <figure class="pic-10"></figure>
    <figure class="pic-11"></figure>
    <figure class="pic-12"></figure>
    <figure class="pic-13"></figure>
    <figure class="pic-14"></figure>
    <figure class="pic-15"></figure>
    <figure class="pic-16"></figure>
    <figure class="pic-17"></figure>
    <figure class="pic-18"></figure>
    <figure class="pic-19"></figure>
</div>

CSS3:

    .pic-wrapper {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        position: absolute;
        width: 259px;
        height: 200px;
        overflow: hidden;
    }
    figure {
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 258px;
      height: 200px;
      opacity: 0;
      /*animation*/

      animation: slideShow 24s linear infinite;
      -o-animation: slideShow 24s linear infinite;
      -moz-animation: slideShow 24s linear infinite;
      -webkit-animation: slideShow 24s linear infinite;

/*suggestion by marczking to make the code shorter: */

      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    .pic-1 {
        opacity:1;
      background: url(http://88t.eu/Pictures/sh/1/intr_01.jpg) no-repeat center center;

    }
    .pic-2 {
      animation-delay: 6s;
      -o-animation-delay: 6s;
      -moz--animation-delay: 6s;
      -webkit-animation-delay: 6s;
      background: url(http://88t.eu/Pictures/sh/1/intr_02.jpg) no-repeat center center;
    }
    .pic-3 {
      animation-delay: 12s;
      -o-animation-delay: 12s;
      -moz--animation-delay: 12s;
      -webkit-animation-delay: 12s;
      background: url(http://88t.eu/Pictures/sh/1/intr_03.jpg) no-repeat center center;
    }
    .pic-4 {
      animation-delay: 18s;
      -o-animation-delay: 18s;
      -moz--animation-delay: 18s;
      -webkit-animation-delay: 18s;
      background: url(http://88t.eu/Pictures/sh/1/intr_04.jpg) no-repeat center center;
    }
    .pic-5 {
      animation-delay: 24s;
      -o-animation-delay: 24s;
      -moz--animation-delay: 24s;
      -webkit-animation-delay: 24s;
      background: url(http://88t.eu/Pictures/sh/1/intr_05.jpg) no-repeat center center;
    }
    .pic-6 {
      animation-delay: 30s;
      -o-animation-delay: 30s;
      -moz--animation-delay: 30s;
      -webkit-animation-delay: 30s;
      background: url(http://88t.eu/Pictures/sh/1/intr_06.jpg) no-repeat center center;
    }
    .pic-7 {
      animation-delay: 36s;
      -o-animation-delay: 36s;
      -moz--animation-delay: 36s;
      -webkit-animation-delay: 36s;
      background: url(http://88t.eu/Pictures/sh/1/intr_07.jpg) no-repeat center center;
    }
    .pic-8 {
      animation-delay: 42s;
      -o-animation-delay: 42s;
      -moz--animation-delay: 42s;
      -webkit-animation-delay: 42s;
      background: url(http://88t.eu/Pictures/sh/1/intr_08.jpg) no-repeat center center;
    }
    .pic-9 {
      animation-delay: 48s;
      -o-animation-delay: 48s;
      -moz--animation-delay: 48s;
      -webkit-animation-delay: 48s;
      background: url(http://88t.eu/Pictures/sh/1/intr_09.jpg) no-repeat center center;
    }
    .pic-10 {
      animation-delay: 54s;
      -o-animation-delay: 54s;
      -moz--animation-delay: 54s;
      -webkit-animation-delay: 54s;
      background: url(http://88t.eu/Pictures/sh/1/intr_10.jpg) no-repeat center center;
    }
    .pic-11 {
      animation-delay: 60s;
      -o-animation-delay: 60s;
      -moz--animation-delay: 60s;
      -webkit-animation-delay: 60s;
      background: url(http://88t.eu/Pictures/sh/1/intr_11.jpg) no-repeat center center;
    }
    .pic-12 {
      animation-delay: 66s;
      -o-animation-delay: 66s;
      -moz--animation-delay: 66s;
      -webkit-animation-delay: 66s;
      background: url(http://88t.eu/Pictures/sh/1/intr_12.jpg) no-repeat center center;
    }
    .pic-13 {
      animation-delay: 72s;
      -o-animation-delay: 72s;
      -moz--animation-delay: 72s;
      -webkit-animation-delay: 72s;
      background: url(http://88t.eu/Pictures/sh/1/intr_13.jpg) no-repeat center center;
    }
    .pic-14 {
      animation-delay: 78s;
      -o-animation-delay: 78s;
      -moz--animation-delay: 78s;
      -webkit-animation-delay: 78s;
      background: url(http://88t.eu/Pictures/sh/1/intr_14.jpg) no-repeat center center;
    }
    .pic-15 {
      animation-delay: 84s;
      -o-animation-delay: 84s;
      -moz--animation-delay: 84s;
      -webkit-animation-delay: 84s;
      background: url(http://88t.eu/Pictures/sh/1/intr_15.jpg) no-repeat center center;
    }
    .pic-16 {
      animation-delay: 90s;
      -o-animation-delay: 90s;
      -moz--animation-delay: 90s;
      -webkit-animation-delay: 90s;
      background: url(http://88t.eu/Pictures/sh/1/intr_16.jpg) no-repeat center center;
    }
    .pic-17 {
      animation-delay: 96s;
      -o-animation-delay: 96s;
      -moz--animation-delay: 96s;
      -webkit-animation-delay: 96s;
      background: url(http://88t.eu/Pictures/sh/1/intr_17.jpg) no-repeat center center;
    }
    .pic-18 {
      animation-delay: 102s;
      -o-animation-delay: 102s;
      -moz--animation-delay: 102s;
      -webkit-animation-delay: 102s;
      background: url(http://88t.eu/Pictures/sh/1/intr_18.jpg) no-repeat center center;
    }
    .pic-19 {
      animation-delay: 108s;
      -o-animation-delay: 108s;
      -moz--animation-delay: 108s;
      -webkit-animation-delay: 108s;
      background: url(http://88t.eu/Pictures/sh/1/intr_19.jpg) no-repeat center center;
    }
    /* keyframes*/

    @keyframes slideShow {  
     0% {
     opacity: 0;
     transform:scale(1);
     -ms-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     transform:scale(1.1);
     -ms-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     transform:scale(1);
     -ms-transformm:scale(1);
    }
    }
     @-o-keyframes 
    slideShow {  0% {
     opacity: 0;
     -o-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -o-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -o-transformm:scale(1);
    }
    }
     @-moz-keyframes 
    slideShow {  0% {
     opacity: 0;
     -moz-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -moz-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -moz-transformm:scale(1);
    }
    }
     @-webkit-keyframes 
    slideShow {  0% {
     opacity: 0;
     -webkit-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -webkit-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -webkit-transformm:scale(1);
    }
    }

 .pic-wrapper {
   margin: 0px 0px 0px 0px;
   padding: 0px;
   position: absolute;
   width: 259px;
   height: 200px;
   overflow: hidden;
 }
 figure {
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 258px;
   height: 200px;
   opacity: 0;
   /*animation*/
   animation: slideShow 24s linear infinite;
   -o-animation: slideShow 24s linear infinite;
   -moz-animation: slideShow 24s linear infinite;
   -webkit-animation: slideShow 24s linear infinite;
   /*suggestion by marczking to make the code shorter: */
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
 }
 .pic-1 {
   opacity: 1;
   background: url(http://88t.eu/Pictures/sh/1/intr_01.jpg) no-repeat center center;
 }
 .pic-2 {
   animation-delay: 6s;
   -o-animation-delay: 6s;
   -moz--animation-delay: 6s;
   -webkit-animation-delay: 6s;
   background: url(http://88t.eu/Pictures/sh/1/intr_02.jpg) no-repeat center center;
 }
 .pic-3 {
   animation-delay: 12s;
   -o-animation-delay: 12s;
   -moz--animation-delay: 12s;
   -webkit-animation-delay: 12s;
   background: url(http://88t.eu/Pictures/sh/1/intr_03.jpg) no-repeat center center;
 }
 .pic-4 {
   animation-delay: 18s;
   -o-animation-delay: 18s;
   -moz--animation-delay: 18s;
   -webkit-animation-delay: 18s;
   background: url(http://88t.eu/Pictures/sh/1/intr_04.jpg) no-repeat center center;
 }
 .pic-5 {
   animation-delay: 24s;
   -o-animation-delay: 24s;
   -moz--animation-delay: 24s;
   -webkit-animation-delay: 24s;
   background: url(http://88t.eu/Pictures/sh/1/intr_05.jpg) no-repeat center center;
 }
 .pic-6 {
   animation-delay: 30s;
   -o-animation-delay: 30s;
   -moz--animation-delay: 30s;
   -webkit-animation-delay: 30s;
   background: url(http://88t.eu/Pictures/sh/1/intr_06.jpg) no-repeat center center;
 }
 .pic-7 {
   animation-delay: 36s;
   -o-animation-delay: 36s;
   -moz--animation-delay: 36s;
   -webkit-animation-delay: 36s;
   background: url(http://88t.eu/Pictures/sh/1/intr_07.jpg) no-repeat center center;
 }
 .pic-8 {
   animation-delay: 42s;
   -o-animation-delay: 42s;
   -moz--animation-delay: 42s;
   -webkit-animation-delay: 42s;
   background: url(http://88t.eu/Pictures/sh/1/intr_08.jpg) no-repeat center center;
 }
 .pic-9 {
   animation-delay: 48s;
   -o-animation-delay: 48s;
   -moz--animation-delay: 48s;
   -webkit-animation-delay: 48s;
   background: url(http://88t.eu/Pictures/sh/1/intr_09.jpg) no-repeat center center;
 }
 .pic-10 {
   animation-delay: 54s;
   -o-animation-delay: 54s;
   -moz--animation-delay: 54s;
   -webkit-animation-delay: 54s;
   background: url(http://88t.eu/Pictures/sh/1/intr_10.jpg) no-repeat center center;
 }
 .pic-11 {
   animation-delay: 60s;
   -o-animation-delay: 60s;
   -moz--animation-delay: 60s;
   -webkit-animation-delay: 60s;
   background: url(http://88t.eu/Pictures/sh/1/intr_11.jpg) no-repeat center center;
 }
 .pic-12 {
   animation-delay: 66s;
   -o-animation-delay: 66s;
   -moz--animation-delay: 66s;
   -webkit-animation-delay: 66s;
   background: url(http://88t.eu/Pictures/sh/1/intr_12.jpg) no-repeat center center;
 }
 .pic-13 {
   animation-delay: 72s;
   -o-animation-delay: 72s;
   -moz--animation-delay: 72s;
   -webkit-animation-delay: 72s;
   background: url(http://88t.eu/Pictures/sh/1/intr_13.jpg) no-repeat center center;
 }
 .pic-14 {
   animation-delay: 78s;
   -o-animation-delay: 78s;
   -moz--animation-delay: 78s;
   -webkit-animation-delay: 78s;
   background: url(http://88t.eu/Pictures/sh/1/intr_14.jpg) no-repeat center center;
 }
 .pic-15 {
   animation-delay: 84s;
   -o-animation-delay: 84s;
   -moz--animation-delay: 84s;
   -webkit-animation-delay: 84s;
   background: url(http://88t.eu/Pictures/sh/1/intr_15.jpg) no-repeat center center;
 }
 .pic-16 {
   animation-delay: 90s;
   -o-animation-delay: 90s;
   -moz--animation-delay: 90s;
   -webkit-animation-delay: 90s;
   background: url(http://88t.eu/Pictures/sh/1/intr_16.jpg) no-repeat center center;
 }
 .pic-17 {
   animation-delay: 96s;
   -o-animation-delay: 96s;
   -moz--animation-delay: 96s;
   -webkit-animation-delay: 96s;
   background: url(http://88t.eu/Pictures/sh/1/intr_17.jpg) no-repeat center center;
 }
 .pic-18 {
   animation-delay: 102s;
   -o-animation-delay: 102s;
   -moz--animation-delay: 102s;
   -webkit-animation-delay: 102s;
   background: url(http://88t.eu/Pictures/sh/1/intr_18.jpg) no-repeat center center;
 }
 .pic-19 {
   animation-delay: 108s;
   -o-animation-delay: 108s;
   -moz--animation-delay: 108s;
   -webkit-animation-delay: 108s;
   background: url(http://88t.eu/Pictures/sh/1/intr_19.jpg) no-repeat center center;
 }
 /* keyframes*/
 @keyframes slideShow {
   0% {
     opacity: 0;
     transform: scale(1);
     -ms-transform: scale(1);
   }
   5% {
     opacity: 1
   }
   25% {
     opacity: 1;
   }
   30% {
     opacity: 0;
     transform: scale(1.1);
     -ms-transform: scale(1.1);
   }
   100% {
     opacity: 0;
     transform: scale(1);
     -ms-transformm: scale(1);
   }
 }
 @-o-keyframes slideShow {
   0% {
     opacity: 0;
     -o-transform: scale(1);
   }
   5% {
     opacity: 1
   }
   25% {
     opacity: 1;
   }
   30% {
     opacity: 0;
     -o-transform: scale(1.1);
   }
   100% {
     opacity: 0;
     -o-transformm: scale(1);
   }
 }
 @-moz-keyframes slideShow {
   0% {
     opacity: 0;
     -moz-transform: scale(1);
   }
   5% {
     opacity: 1
   }
   25% {
     opacity: 1;
   }
   30% {
     opacity: 0;
     -moz-transform: scale(1.1);
   }
   100% {
     opacity: 0;
     -moz-transformm: scale(1);
   }
 }
 @-webkit-keyframes slideShow {
   0% {
     opacity: 0;
     -webkit-transform: scale(1);
   }
   5% {
     opacity: 1
   }
   25% {
     opacity: 1;
   }
   30% {
     opacity: 0;
     -webkit-transform: scale(1.1);
   }
   100% {
     opacity: 0;
     -webkit-transformm: scale(1);
   }
 }

<div class="pic-wrapper lejatszokep">
  <figure class="pic-1"></figure>
  <figure class="pic-2"></figure>
  <figure class="pic-3"></figure>
  <figure class="pic-4"></figure>
  <figure class="pic-5"></figure>
  <figure class="pic-6"></figure>
  <figure class="pic-7"></figure>
  <figure class="pic-8"></figure>
  <figure class="pic-9"></figure>
  <figure class="pic-10"></figure>
  <figure class="pic-11"></figure>
  <figure class="pic-12"></figure>
  <figure class="pic-13"></figure>
  <figure class="pic-14"></figure>
  <figure class="pic-15"></figure>
  <figure class="pic-16"></figure>
  <figure class="pic-17"></figure>
  <figure class="pic-18"></figure>
  <figure class="pic-19"></figure>
</div>

Answer 1

这与为您的动画 设置的时间有关。当我将时间更改为 114 秒时，它会循环遍历所有图像。

如果你需要让它更快或更慢，你将不得不通过并调整 figure 元素上的 animation 和 animation-delay 在每个 .pic-x 元素上手动设置。