Grow your CSS skills. Land your dream job.

Pseudo Element Animations/Transitions Bug Fixed in WebKit

Published by Chris Coyier

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.

Comments

  1. James
    Permalink to comment#

    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.

    • Caleb Kester
      Permalink to comment#

      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.

  2. Andrew
    Permalink to comment#

    As stated, it also works in Firefox, so open Firefox as well to see it work.

  3. 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.

  4. 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

  5. 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!”

  6. 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!

  7. this is HUGE news. been waiting for this for years, thanks to the chrome devteam!

  8. Permalink to comment#

    WOOT. I came across that problem a while back and was quite annoyed by it. But decided to just let my code ride anyway

  9. Grant Zabriskie
    Permalink to comment#

    Super excited about this. Opens up a lot of great opportunities!

  10. Jens
    Permalink to comment#

    Tried the codepen in chrome Android: no. Animation.
    Wha

  11. Jens
    Permalink to comment#

    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?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".