jQuery bind to css3 transition occuring

Question

So far in my research the only css3 transition event I've found is transitionEnd. What I would like to do is bind a javascript function to an element to be constantly re-fired while a transition is occurring. Think $(window).resize but for an element being resized with a css3 transition.

Is this possible? I have found no transitionStart, transitionAnimation or anything else that would allow me to detect, the start of, or the time when, a transition is occurring.

I would prefer jQuery's bindings, but other methods are fine. Also this needs to work in FF, Chrome, Safari and Opera. Thanks folks!

Answer 1

The only event associated with CSS3 transitions is the transitionend [1].

[1] http://www.w3.org/TR/css3-transitions/#transition-events-

Answer 2

There are no other CSS transition events: http://dev.w3.org/csswg/css3-transitions/#transition-events-

I am assuming you are adding a css class that handles the transition either on page load or on some type of event (mouseover, click, mouseenter etc). Use that as your start for your parallel javascript function. Then use transitionEnd to stop it. To get it compatible with multiple browsers you might want to read

https://developer.mozilla.org/en/CSS/CSS_transitions

Hope that helps