CODEWITHSUNDEEP
htmlcss
mergh
mergh

Reputation: 89

background picture slideshow with fade

I would like to change between background pictures. I wish to use fade in and out. When picture is up, I want it to stay with 100% opacity for some time. Currently I have problems how to figure out how this can be done, and the opacity is like a walking missile.

I have this ( save space but know I should use webkit and moz as well). It works, but it looks like as soon as the opacity is 100% it begin to decrease, - I would like it to stay at those 100% for x time for each picture, and the fade effect should be pretty fast:

.banner ul.kf-slider li {
    animation: fade-out 24s infinite both;
    background-image: url(images/photo1.jpg); 
}
@media (min-width: 58em) {
   .banner ul.kf-slider li {
        background-image: url(images/photo1.jpg); 
   } 
}
.banner ul.kf-slider li:nth-child(2) {
    background-image: url(images/photo2.jpg);
    animation-delay: 8s; 
}
@media (min-width: 58em) {
    .banner ul.kf-slider li:nth-child(2) {
        background-image: url(images/photo2.jpg); 
    } 
}
.banner ul.kf-slider li:nth-child(3) {
    background-image: url(images/photo3.jpg);
    animation-delay: 16s; 
}
@media (min-width: 58em) {
    .banner ul.kf-slider li:nth-child(3) {
    background-image: url(images/photo3.jpg); } 
}

@keyframes fade-in {
     0% {  opacity: 0; }
     100% { opacity: 1; } 
    }
}

@keyframes fade-out {
     33% {   opacity: 1; }
     66% {  opacity: 0; } 
}

html code:

<section class="banner">
    <!--List items for bg images -->
    <ul class="kf-slider">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>

Upvotes: 0

Views: 1788

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Some generic issues

  • your media queries where not making any changes so i have removed them.
  • you were not using the fadi-in animation so i removed it
  • you had some extra } which i removed

Since you are using a single animation (you have to, since you are animating the same property) you need to time the animation along the whole duration of the animation (the time it takes for all images to fade in / out)

So you animation would be something like this

  • All start with opacity 0
  • slide fades in for 2 seconds and remains opaque for 6 seconds and fades out for another 2 second
  • the 2 seconds of fade out coincide with the 2 seconds of fade in of the next slide

So since you want 24 seconds for the whole slideshow (should be called fadeshow since we are not sliding anything) each 1 second of the keyframes is 4.1666% of the whole duration.

@keyframes fade-out {
  0% {opacity: 0;} /*start fading in*/
  8.333%{opacity:1} /*complete the fade in in 2 seconds*/
  33.333%{opacity:1} /*remain at opacity 1 until 8 seconds*/
  41.666% {opacity: 0;} /*fade out until 10 seconds*/
}

Full example

.banner ul.kf-slider {
  list-style: none;
  margin: 0;
  padding: 0;
}
.banner ul.kf-slider li {
  width: 300px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  opacity:0;
  
  animation: fade-out 24s infinite;
  background-image: url(https://dummyimage.com/300x200&text=Image1);
}
.banner ul.kf-slider li:nth-child(2) {
  background-image: url(https://dummyimage.com/300x200&text=Image2);
  animation-delay: 8s;
}
.banner ul.kf-slider li:nth-child(3) {
  background-image: url(https://dummyimage.com/300x200&text=Image3);
  animation-delay: 16s;
}
@keyframes fade-out {
  0% {opacity: 0;}
  8.333%{opacity:1}
  33.333%{opacity:1}
  41.666% {opacity: 0;}
}
<section class="banner">
  <!--List items for bg images -->
  <ul class="kf-slider">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

Upvotes: 1

Related Questions