Home/ Questions/Q 6002339
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:57:50+00:00

I have a CSS3 animation that needs to be restarted on a click. It’s

  • 0

I have a CSS3 animation that needs to be restarted on a click. It’s a bar showing how much time is left. I’m using the scaleY(0) transform to create the effect.

Now I need to restart the animation by restoring the bar to scaleY(1) and let it go to scaleY(0) again.
My first attempt to set scaleY(1) failed because it takes the same 15 seconds to bring it back to full length. Even if I change the duration to 0.1 second, I would need to delay or chain the assignment of scaleY(0) to let the bar replenishment complete.
It feels too complicated for such a simple task.

I also found an interesting tip to restart the animation by removing the element from the document, and then re-inserting a clone of it:
http://css-tricks.com/restart-css-animation/

It works, but is there a better way to restart a CSS animation?
I’m using Prototype and Move.js, but I’m not restricted to them.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just set the animation property via JavaScript to "none" and then set a timeout that changes the property to "", so it inherits from the CSS again.

    Demo for Webkit here: http://jsfiddle.net/leaverou/xK6sa/
    However, keep in mind that in real world usage, you should also include -moz- (at least).

    • 0