I have 5 images (icons) which i want to display at 50% opacity and then create a css animation to cycle through each changing the opacity to 0% and then back to 50%. Hence it would be all icons 50%, icon 1 goes from 50% to 0% and then back to 50% then icon 2 goes from 50% to 0 and back, then icon 3 etc and then at the end it loops and starts again. The I have attempted this but have got to the stage where I need a start delay and an end delay instead of 1 delay. Hence for each icon animating for 5 secs I need number 1 to animate and then wait 25. Item 2 must wait 5 secs before starting and then animate before waiting 25 secs till it starts again, item3 waits for 10 secs etc.
Say I did have 5 animations then I am unsure how the delay would work. Is there a start delay and an end delay. The second item for instance would need to delay its start by 5 secs but then have a delay after completion of 20 secs before starting again. However I can only see 1 delay option which would apply before and after ?