Search code examples
csswebkitpseudo-element

Applying WebKit transitions to Pseudo Elements

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?

Solution

  • 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