Css3 animation time delayed restarts

[switchfire]

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.

[Kitty Giraudel]

Remove and add a class. Easy peasy.

[CrocoDillon]

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

[CrocoDillon]

> Remove and add a class. Easy peasy.

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

[Paulie_D]

>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.

[Kitty Giraudel]

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.

[Paulie_D]

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

I ‘ll have to look into that one.

[Kitty Giraudel]

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

[Author]

Posts