CODEWITHSUNDEEP
htmlcsscss-transitions
name
name

Reputation: 457

CSS3 transition for :after pseudoelement

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

The transition for the :after pseudo element works in firefox, but fails in webkit based browsers. Any idea if this is coming up in a future release? Any non-jquery overkill workarounds for it?

Basically, I'm using it on a page to fade between two states of a background image sprite(instead of two colors like in the fiddle). A smooth transition between an icon's normal and hover state. So I don't want to add a bunch of actual elements to it just to make this animation work.

Upvotes: 5

Views: 4482

Answers (1)

Alex Peattie
Alex Peattie

Reputation: 27647

Unfortunately, this is a known issue in Webkit browsers and IE:

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

However, fading between image sprite states is do-able in jQuery. This tutorial gives a good run down:

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

Upvotes: 5

Related Questions