Pure CSS3 slideshow repeats the last 4 slides?

Question

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>

Answer 1

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.

Answer 2

This code is way too long, too many classes, unpractical to maintain and much unnecessary Css. I did not check why this does not work properly, it will be the set timing. Do it like this instead, it's much less code and fully responsive, and you can easily add and remove pics:

div#slider figure {
position: relative;
width: 800%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
-webkit-animation: 28s bro infinite;  
animation: 28s slidy infinite; 
}

http://codepen.io/damianocel/pen/wKxgpz