Grow your CSS skills. Land your dream job.

Css3 animation time delayed restarts

  • # June 17, 2013 at 11:53 am

    Hello everyone, I’ve been searching high and low for an answer and I was hoping you guys can help.

    There’s alot about restarting css3 animations, the problem I’ve come across is that they all seem to be onclick/ hover ect.

    I was hoping someone could help me on this, I wanted to restart an animation using jQuerry/ Javascript once a set time has past.

    # June 17, 2013 at 12:19 pm

    Remove and add a class. Easy peasy.

    # June 17, 2013 at 12:21 pm

    You can probably do that with CSS itself with the `animation-delay` property (see http://www.css3files.com/animation/), else read this http://www.css3files.com/animation/, but put it in a `setTimeout` callback instead of an event listener.

    If you specify what it is exactly you’re after :P

    # June 17, 2013 at 12:22 pm

    > Remove and add a class. Easy peasy.

    Only if you put a delay or something that triggers some magic shizzle in between it :P

    # June 17, 2013 at 12:24 pm

    >Remove and add a class. Easy peasy.

    AFAIK, that won’t stop an animation in mid-stream and it will only re-start one from the beginning.

    It sounds to me as though a “pause” option is required, in which case it would make more sense (I think) to do the whole animation in JQ/JS.

    # June 17, 2013 at 12:27 pm

    Then you could change the `animation-state` to pause, then remove the class, then add it back whenever you want. I think it will reset the animation.

    # June 17, 2013 at 12:34 pm

    Ooh..hadn’t heard of `animation-state`.

    I ‘ll have to look into that one.

    # June 17, 2013 at 12:36 pm

    Easy enough: it’s either `running` or `paused`.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".