It has been a long-standing bug in WebKit that pseudo elements (like ::before and ::after) cannot be animated or transitioned. As of yesterday that bug was fixed thanks to Elliott Sprehn. You can pop open Google Chrome Canary and see them work.
He notes in the ticket:
The new DOM based :before and :after pseudo elements support animations and transitions already, but I had disabled support so we could turn them on in a separate step.
DOM based eh? I wonder what that means exactly. Can we, for instance, bind events to them? I don’t see them any differently in the Chrome dev tools. If anyone knows, let me know.
For the record, Firefox has supported this forever. Safari will likely support it whenever they next update (they are the slowest to update of all browsers). No support yet in Opera. I’m not sure how this kind of thing propagates out to mobile WebKit.
IE 10 supports animations on pseudo elements. Transitions as well, but with one weird caveat:
.x:hover:before { /* By itself, doesn't work */ }
.x:hover {}
.x:hover:before { /* This works (needs :hover declared) */ }Video demonstrating by Caleb Kester.
I’ve happily updated this chart.
I’m on Chrome Canary 26.0.1373.0 and I’m not seeing any animations or transitions. Is there something I need to configure or has the latest version of Canary just not been pushed out to me yet?
Hey James, it should works fine out of the box. It does for me.
James, I had the same issue. Go to Options -> About Google Chrome and hopefully it will check to see if a newer version is available. Mine took a bit to find it and then it asked me to relaunch in the new version.
As stated, it also works in Firefox, so open Firefox as well to see it work.
I’m glad this is finally working. I attempted to implement an animated pseudo element on my portfolio site a few months back, but had to switch to using an actual HTML element due to the WebKit bug. Hopefully it’ll get pushed out to the Chrome stable channel soon.
Fortunately this fix also applies to display: box and box-ordinal-group reordering which saw :before content stuck above the first child element even if it was repositioned.
Demo
Huzzah! I’ve been putting them into things (the nav on my site, for example) just to do it, even though it was only working in FireFox at the time. The states still change, as you’d expect, they just don’t transition, so I was careful to only do it with things that didn’t require a transition for meaning: the end state was enough. That being said, assuming all goes well, it’ll just work in webkit once that goes into the stable build. So again I say “Huzzah!”
This is excellent news, I was planning to use pseudo elements for some subtle transition cues in our UI a while ago but had to abandon it because I couldn’t animate cleanly. Looking forward to playing around with them!
this is HUGE news. been waiting for this for years, thanks to the chrome devteam!
WOOT. I came across that problem a while back and was quite annoyed by it. But decided to just let my code ride anyway
Super excited about this. Opens up a lot of great opportunities!
“DOM based eh? I wonder what that means exactly” -> In fact it means that behind the scene we implement them as regular DOM nodes (to make it simple) but it’s not exposed to the public as pseudo-elements are not accessible (just like today). It’s an implementation detail regarding how we deal with it in WebKit but should not matter for users. I hope this helps.
Tried the codepen in chrome Android: no. Animation.
Wha
One year later and it’s broke again? The anomation part in the code pen does not work in Chrome 32.0.1700.107 and chrome on Android :-( Works in Firefox though.
What’s up with that?