CODEWITHSUNDEEP
csswebkitslideshowcss-animations
Chanatip Yim
Chanatip Yim

Reputation: 366

CSS3 fading have wrong action

I'm trying to create an image gallery using CSS3 without requiring javascript. This is my current solution:

.slide {
  position: absolute;
}
.slide:nth-child(1) {
  -webkit-animation: fade 24s 18s infinite;
  z-index: 10;
}
.slide:nth-child(2) {
  -webkit-animation: fade 24s 12s infinite;
  z-index: 10;
}
.slide:nth-child(3) {
  -webkit-animation: fade 24s 6s infinite;
  z-index: 10;
}
.slide:nth-child(4) {
  -webkit-animation: fade 24s 0s infinite;
  z-index: 10;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  23% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" />
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" />
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />
<img src="http://www.yondaphotography.com/wp-content/uploads/2014/01/Nature-Photography-Techniques-For-Beginners.jpg" class="slide" alt="" />

My issue is when CSS render's the fourth image, it show's a blank area before it render's the next image, and when it loop's back to render the image's again, it always show's a blank area between each image.

How can I fix this problem? Can someone please suggest a solution.

Thanks.

Upvotes: 3

Views: 92

Answers (2)

Chanatip Yim
Chanatip Yim

Reputation: 366

Technical solution is:

  1. alway show first image with opacity:1;

  2. second image will show from 30-66% and alway hide if not in this range.

  3. third image will show from 64-96% and always hide if not in this range.

  4. ** I also want to have fading effect when swap third image to first image, solution is hide third image from 96-100%. See coding below.

    /*.item:nth-child(1){
        -webkit-animation: fade1 50s infinite;
    }*/
    .item:nth-child(2){
        -webkit-animation: fade2 50s infinite;
    }
    .item:nth-child(3){
        -webkit-animation: fade3 50s infinite;
    }
    /*@-webkit-keyframes fade1 {
        0% {opacity:0;}
        2% {opacity:1;}
        100% {opacity:1;}
    }*/
    @-webkit-keyframes fade2 {
        0% {opacity:0;}
        30% {opacity:0;}
        34% {opacity:1;}
        65% {opacity:1;}
        66% {opacity:0;}
        100% {opacity:0;}
    }
    @-webkit-keyframes fade3 {
        0% {opacity:0;}
        60% {opacity:0;}
        64% {opacity:1;}
        96% {opacity:1;}
        100% {opacity:0;}
    }
<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" />

<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" />

<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />

Upvotes: 0

wilddesign
wilddesign

Reputation: 46

Actually after a bit fiddling with the code I managed to reproduce the OP's problem in Chrome.

The problem is caused by bad synchronization of img's opacity over the animation time. The image blinks when its opacity turns to 0 and there is no visible image below.

An intuitive and easily understandable resolution for preserving the synchronization over the iterations is defining a series of animations, one for each image, so that we can individually refine transitions for each image, like that:

    .slide {
    position:absolute;
}

.slide:nth-child(1) {
    -webkit-animation: fade0 24s infinite;
    z-index:10;
}

.slide:nth-child(2) {
    -webkit-animation: fade25 24s infinite;
    z-index:10;
}

.slide:nth-child(3) {
    -webkit-animation: fade50 24s infinite;
    z-index:10;
}

.slide:nth-child(4) {
    -webkit-animation: fade75 24s infinite; 
    z-index:10;
}

@-webkit-keyframes fade0 {
   0% {opacity:0.95;}
   2% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade25 {
   0% {opacity:0;}
   25% {opacity:0;}
   27% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade50 {
   0% {opacity:0;}
   50% {opacity:0;}
   52% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade75 {
   0% {opacity:0;}
   75% {opacity:0;}
   77% {opacity:1;}
   100% {opacity:1;} 
   }
<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" />
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" />
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />
<img src="http://www.yondaphotography.com/wp-content/uploads/2014/01/Nature-Photography-Techniques-For-Beginners.jpg" class="slide" alt="" />

Upvotes: 1

Related Questions