Applying WebKit transitions to Pseudo Elements

Question

I have made a Fiddle for reference: http://jsfiddle.net/xypQY/

Which element would i apply WebKit transitions on to achieve a Fade In effect using opacity?

Answer 1

This is a webkit bug, transitions do not work in Chrome or Safari on pseudo-elements.

Please star this bug to hopefully help the ball get rolling on a fix:

Issue 54699: CSS3 transition not applied for pseudo elements

It has been reported to Webkit:

Bug 23209 - Transitions and animations do not apply to CSS generated content

so hopefully it will be fixed soon.

UPDATE: Support for transitions was added to Webkit on 01/02/2013: https://trac.webkit.org/changeset/138632

Answer 2

At last the bug is fixed in Google Chrome.

You can start using transitions on pseudo elements, most Chromes have already updated as on January 24, 2013.

Waiting for Safari to pull these updates.

See how things are doing with other browsers here