Why is this CSS @keyframes rule not cross-fading?

Question

I am trying to create a very simple slideshow that cross-fades between each image. The problem is that the images are fading out before the next image has started to fade in.

I wanted each image to fade in for a duration of 1 second, remain for a further 10 seconds, and then fade out for a duration of 1 second - totalling 12 seconds.

The @keyframes were calculated by dividing the animation-duration by 100, resulting in 1.81% for each second.

The animation-delay is 11s which is causing my confusion as the next image should be fading in as the last images fades out.

If anyone could shed any light on what I've done wrong then I'd be very appreciative.

HTML:

<!doctype html>
<html>
    <body>
        <main>
            <div id="cf">
                <img src="https://placeimg.com/640/480/animals">
                <img src="https://placeimg.com/640/480/nature">
                <img src="https://placeimg.com/640/480/tech">
                <img src="https://placeimg.com/640/480/people">
                <img src="https://placeimg.com/640/480/sepia">
            </div>
        </main>
    </body>
</html>

CSS:

@keyframes crossFade{
    0%{opacity: 0;}
    1.81%{opacity: 1;}
    18.18%{opacity: 1;}
    19.98%{opacity: 0;}
    100%{opacity: 0;}
}

#cf img{
    position:absolute;
    left:0;
    opacity: 0;
    animation-name: crossFade;
    animation-duration: 55s;
    animation-iteration-count: infinite;
}

#cf img:nth-last-of-type(1){
    animation-delay: 0s;
}

#cf img:nth-last-of-type(2){
    animation-delay: 11s;
}

#cf img:nth-last-of-type(3){
    animation-delay: 22s;
}

#cf img:nth-last-of-type(4){
    animation-delay: 33s;
}

#cf img:nth-last-of-type(5){
    animation-delay: 44s;
}

Link to Codepen: https://codepen.io/Musicky/pen/YgyOPm

Answer 1

I changed your percentages and duration. This will display like you are expecting.

You may want to adjust the length of when the first transitions starts, but your original was not overlapping. It is simpler to time things when they are divisible. Not saying it cant be done, but harder to implement

 @keyframes crossFade{ 0%{opacity: 0;} 10%{opacity: 1;} 20%{opacity: 1;} 30%{opacity: 0;} 100%{opacity: 0;} } #cf img{ position:absolute; left:0; opacity: 0; animation-name: crossFade; animation-duration: 60s; animation-iteration-count: infinite; } #cf img:nth-last-of-type(1){ animation-delay: 0s; } #cf img:nth-last-of-type(2){ animation-delay: 10s; } #cf img:nth-last-of-type(3){ animation-delay: 20s; } #cf img:nth-last-of-type(4){ animation-delay: 30s; } #cf img:nth-last-of-type(5){ animation-delay: 40s; }

 <div id="cf"> <img src="https://placeimg.com/640/480/animals"> <img src="https://placeimg.com/640/480/nature"> <img src="https://placeimg.com/640/480/tech"> <img src="https://placeimg.com/640/480/people"> <img src="https://placeimg.com/640/480/sepia"> </div>

Why is this CSS @keyframes rule not cross-fading?

Question

1 answers

solution1
0 ACCPTED 2019-02-28 16:32:30

Why is this CSS @keyframes rule not cross-fading?

Question

1 answers

solution1 0 ACCPTED 2019-02-28 16:32:30

solution1
0 ACCPTED 2019-02-28 16:32:30