纯粹的CSS3幻灯片重复了最后4张幻灯片？ [英] Pure CSS3 slideshow repeats the last 4 slides?

查看：137 发布时间：2018/6/21 14:07:58 html css css3

本文介绍了纯粹的CSS3幻灯片重复了最后4张幻灯片？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

问题在于它重复了最后4张幻灯片。有人可以告诉我为什么以及如何解决这个问题吗？

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; 
位置：绝对; 
 width：259px; 
 height：200px; 
 overflow：hidden; 
} 
图{
 margin：0; 
 padding：0; 
位置：绝对; 
 top：0; 
剩下：0; 
 width：258px; 
 height：200px; 
 opacity：0; 
 / *动画* / 
 
动画：slideShow 24s线性无限; 
 -o-animation：slideShow 24s linear infinite; 
 -moz-animation：slideShow 24s linear infinite; 
 -webkit-animation：slideShow 24s线性无限; 
 
 / *通过marczking使代码缩短的建议：* / 
 
 -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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：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  - 动画延迟：108s; 
 -webkit-animation-delay：108s; 
 background：url（http://88t.eu/Pictures/sh/1/intr_19.jpg）no-repeat center center; 
} 
 / *关键帧* / 
 
 @keyframes slideShow {
 0％{
 opacity：0; 
 transform：scale（1）; 
 -ms-transform：scale（1）; 
} 
 5％{
不透明度：1 
} 
 25％{
不透明度：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％{
不透明度：1 
} 
 25％{
不透明度：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％{
不透明度：1 
} 
 25％{
不透明度：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％{
不透明度：1 
} 
 25％{
不透明度：1; 
} 
 30％{
 opacity：0; 
 -webkit-transform：scale（1.1）; 
} 
 100％{
 opacity：0; 
 -webkit-transformm：scale（1）; 
 
 
 $ / code $ / pre

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

$ b

解决方案 它与为您的动画设置的时间有关。当我将时间更改为114s时，它会循环显示所有图像。

如果您需要使速度更快或更慢，则必须经过并调整<$ c $在图元素和动画延迟上手动添加 c $ c> .pic-x 元素。

I found a script, namely: "Pure CSS / CSS3 Slideshow with Image Panning and zooming Effect".

The problem with this it that it repeats the last 4 slides. Could someone tell me why and how to resolve this problem?

My first fiddle, demonstrating the issue.

My second one, proving the issue.

The 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>

The 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>

解决方案

It has to do with the time set for your animation. When i changed the time to 114s it cycled throught all images.

If you need to make it faster or slower you will have to go through and adjust the animation on the figure element and the animation-delay manually on each .pic-x element.

这篇关于纯粹的CSS3幻灯片重复了最后4张幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

纯粹的CSS3幻灯片重复了最后4张幻灯片？ [英] Pure CSS3 slideshow repeats the last 4 slides?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

纯粹的CSS3幻灯片重复了最后4张幻灯片？ [英] Pure CSS3 slideshow repeats the last 4 slides?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭