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.


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.


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.

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.

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


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.