Treehouse: Grow your CSS skills. Land your dream job.

Sequential animation of 5 items

  • # October 30, 2012 at 12:29 pm

    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.

    Is this possible with css animation?



    # October 30, 2012 at 12:35 pm

    It is but you would need 5 animations, one for each icon with appropriate delays.

    I think this sort of thing is best left to javascript.

    By the way, the browser will hate it as opacity and transitions are really memory intensive as it will constantly be refreshing the screen.

    # October 30, 2012 at 12:50 pm

    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 ?

    # October 30, 2012 at 1:00 pm

    On thinking about it, you probably don’t need a delay at all.

    All the animations would last 25/30 seconds (5 or 6*5s) but the opacity would come in at different points in the animation.

    As I said, I think this sort of thing would be better done with JS.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.