CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.
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.
Remove and add a class. Easy peasy.
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
> Remove and add a class. Easy peasy.
Only if you put a delay or something that triggers some magic shizzle in between it :P
>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.
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.
Ooh..hadn’t heard of `animation-state`.
I ‘ll have to look into that one.
Easy enough: it’s either `running` or `paused`.
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed