CSS3 transition for: after pseudo-element

Question

Check out this script: http://jsfiddle.net/sajYc/

The transition for the pseudo-element :afterworks in firefox, but does not work in webkit-based browsers. Any idea if this will happen in a future release? Any workarounds not related to jquery?

Basically, I use it on the page to fade between the two states of the sprite of the background image (instead of two colors, like in a violin). Smooth transition between a normal icon and a hang. Therefore, I do not want to add a bunch of real elements to it to make this animation work.

Answer 1

, Webkit IE:

http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

, jQuery. :

http://www.tutorial9.net/tutorials/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/