How to enable -webkit-animation/transition-property for :before and :after pseudo elements?

How to enable -webkit-animation for :before and :after pseudo elements?

You can see in http://jsfiddle.net/4rnsx/ that it is not working for :before and :after.

And here I am trying to enable this feature with Mootools http://jsfiddle.net/6bzCS/.

Mozilla - will support it in Firefox 4 https://developer.mozilla.org/en/CSS/-moz-transition-property

W3C - CSS3 supports transition-property for all elements, :before and :after pseudo elements http://www.w3.or开发者_JAVA技巧g/TR/css3-transitions/#transition-property

Update: How to enable fadein,fadeout for CSS3 tooltip http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/ and demo?

The jsFiddle mentioned in the question appears fine in modern Chrome and Safari browsers. I think the animation side of thing's been solved by browser evolution.

However, there's still an outstanding/open bug for the transition side of things: http://code.google.com/p/chromium/issues/detail?id=54699

The bug is fixed in Google Chrome 24 on January 3rd, 2013.

Waiting for Safari to pull these updates.

See how things are doing with other browsers here