Fade 3 divs in and out of each other in turn

Hi had help with this before but it was to fade 2 divs in and out of each other, as in the link below.

https://codepen.io/paulobrien/pen/GezGEK

I have been asled to create a 3rd div and fade that in, have tried with the code above, but I cant seem to use this code to do it, is there a way of creating the 3rd div and like I say fading it in after the 2nd one.

Thanks

Yes you can change it 3 divs by adding another keyframe and changing the timing so that only one is faded in at a time.

This is very rough as I am in a rush but here’s the basics.

https://codepen.io/paulobrien/pen/abbNWmd

If I get time tomorrow evening I’ll try tidying it up :slight_smile:

1 Like

Thank you Paul, works brilliantly…

CSS not my thing, but thanks again

1 Like

Here’s a rejigged (proof-of-concept) version using only one keyframe and simpler code.

https://codepen.io/paulobrien/pen/YzzqgVJ

The animation delay is the key to making each subsequent div wait before fading in. There needs to be a little overlap in the percentages so one fades in while the other fades out.

1 Like

Love it, thats much slicker and works really well.

Thats one for the programming bank, thanks again PaulOB

2 Likes