CODEWITHSUNDEEP
csswebkitcss-transitionspseudo-element
cjroebuck
cjroebuck

Reputation: 2263

CSS Transitions with :before and :after pseudo elements

Can't seem to animate pseudo elements with -webkit-transition. The fiddle below shows what I mean when run in Chrome/Safari, I guess this isn't supported right now?

http://jsfiddle.net/4rnsx/130/

Upvotes: 30

Views: 42289

Answers (3)

Dan
Dan

Reputation: 57951

Fixed in Google Chrome on January 3rd, 2013.

By now (I do update this list) it's supported in:

  • FireFox 4.0 and above
  • Chrome 26 and above
  • IE 10 and above

Waiting for Safari and Chrome for Android to pull these updates.

You can test it yourself in your browser, or

See the browser support table.

Upvotes: 20

Aurelio
Aurelio

Reputation: 25812

Well, actually, you can.

You just need to leverage the often forgotten inherit value. Unfortunately we can't (yet) directly target pseudo-elements with custom animations, but we surely can let them share the same animation of the "parent" element by inheriting the properties we wish to animate.

See my fiddle here.

Upvotes: 52

Doug Stephen
Doug Stephen

Reputation: 7351

Nope, not supported yet

Upvotes: 9

Related Questions