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

if you divide the duration by 100 how you get the 1.81%

Temani Afif
– Temani Afif

2019-02-28 16:11:03 +00:00
Commented Feb 28, 2019 at 16:11 — Temani Afif
– Temani Afif, Commented Feb 28, 2019 at 16:11

I. Johnson · Accepted Answer · 2019-02-28 16:32:30Z

0

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>

answered Feb 28, 2019 at 16:32

I. Johnson

2801 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I. Johnson Over a year ago

@WillHammond If this reply fixed your problem mark it as the accepted answer so others who find this will also know how to fix their problem

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related