Pseudo Element Animations/Transitions Bug Fixed in WebKit

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.