Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sequential animation of 5 items

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #40524
    nickthorley
    Member

    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?

    Thanks

    Nick

    #112935
    Paulie_D
    Member

    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.

    #112938
    nickthorley
    Member

    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 ?

    #112944
    Paulie_D
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.