Grow your CSS skills. Land your dream job.

Transitions and Animations on CSS Generated Content

Published by Chris Coyier

Generated content means pseudo elements added to the page via the ::before and ::after. The support for applying transitions or animations to these in the current browser landscape is not great. I think this is a huge bummer, so I'm just making this blog post my permanent home to track the progress on this.

Data in this table is from this test case.

Firefox 3.6 and down Unsupported
4.0 and up Supported
Safari 6.0.5 and down Unsupported - bug report
6.1 and up Supported
Chrome 25 and down Unsupported
26 and up Supported - Fixed January 3, 2013
Opera 12.16 and down Unsupported - wasn't able to get in here, but Divya Manian confirmed the report exists and is BTS number CORE-29141.
15 and up Supported - post Blink conversion
Internet Explorer 9 and down Unsupported
10 and up Supported - with one weird caveat noted here.

On mobile, on Safari on iOS 6.1 and down they didn't work, but they do on Safari on iOS 7.

Why does this matter?

Pseudo elements are really really useful. They help us in our struggle as designers to do fancy things while keeping our markup clean. The bonus design-y bits that pseudo elements are the most useful with are the same kind of design-y bits that transitions and animations are useful for. There is a lot of overlap there. At the time of this writing, the design of this site has animated pseudo elements in the footer. The row of boxes on the bottom have logos that slide in (or should slide in, if this was universally supported).

There is no reason that browsers shouldn't support this. I understand all about prioritization, so I'm not whining or blaming browsers for not being there yet, but I'm hoping this article helps a bit in keeping it on the radar.

Comments

  1. John
    Permalink to comment#

    Completely agree, it’s what keeps me using Jquery (not that it’s a bad thing) would just much rather achieve some semantic sexiness with pure CSS.

  2. Permalink to comment#

    It only worked on Firefox for me, the animation one, which was LOVELY, damn. I may have a dumb question, but wouldn’t it be easier to achieve this using the canvas element?

  3. Jens
    Permalink to comment#

    Hey I know this problem. I fixed it with this solution:
    Give the DIV some Transitions, put ::after or ::before in the DIV and this is it. But I hope they make it work in 2011.

    • That means the div will transition, but not specifically the pseudo elements (but they will go along for the ride with the div, you just can’t transition them specifically).

  4. Remco
    Permalink to comment#

    Agreed, It could give a lot of new posibilities. Especially the ‘content’ property together with the ‘@keyframes’, this could make a nice image slider. Displaying a new image every 10 seconds, making it slide left or right, Pure CSS image sliders.

  5. Permalink to comment#

    I have been thinking of looking into this, as we’re busy with a complete overhaul on our site, and were hoping to use transitions with a sprite inside the pseudo elements!

    What a bummer that it’s not (yet?) well supported!

    Those pseudo elements are magical… I can’t wait for the day when IE7 support can be abandoned, and sprites and HTML can be neatened up with these little gems.

    Thanks for the heads up, Chris – you’ve saved me hours of headache :)

  6. I’m pretty sure we’re almost at the point where IE7 support can be abandoned. It’s browser share is only 1/2% higher than IE6.

  7. Love the new site Layout!
    Modern Architectures. wooHooOO!

  8. Yep, can’t wait for this to be implemented, specifically because it will make transitioning between background images possible on a single element. Thanks Chris for flagging this up, hopefully the browser manufacturers will take note!

  9. Permalink to comment#

    I’ve been waiting for the guys at chrome for a long time to fix this…

  10. Artyom
    Permalink to comment#

    I normally use Chrome for day-to-day browsing, but having read this post I decided to pull up my Firefox (which I upgraded to version 6 yesterday) to see how the boxes near the footer are supposed to look like. That was all good fun, but I discovered that this website doesn’t pull up properly on my Firefox (maybe it’s only on version 6, I didn’t check the older versions). It seems to only affect the homepage and some post pages, but they either look completely black or only the header shows up when loaded, until I scroll down, and even then not everything shows up when I scroll back up. Very weird.

    • Artyom
      Permalink to comment#

      Only seems to happen when the viewport width is larger than 1024 pixels, at certain width/height combinations (my full-sized Firefox window must be one of those combinations). Maybe it has to do something with the animated reflowing of content, which I didn’t know about before – very cool, by the way.

  11. Charbs
    Permalink to comment#

    Pretty cool effect on the boxes down the footer. I remember that effect was there in the previous design, I’m guessing you were using jQuery for that? Cause it used to nicely slide in even on chrome.

  12. Permalink to comment#

    CSS3 with jQuery fallback :P

  13. Permalink to comment#

    This is great as clean markup is diffidently needed and much loved by myself!

    Cheers

  14. I look at the table with browser support and versions and I’m sad.
    That’s why it’s still safe to use jQuery for this kind of stuff.

  15. Permalink to comment#

    The Canary/dev versions of Chrome (v. 15) don’t have support for transitions & animations on generated content either. So I guess it’s still some time before we will see this in Chrome.

  16. I’m still convinced of the idea that today’s web developer is more of ‘the support every browser and try to make every website the same in every browser’ flow.
    We need to move to the new style and add some CSS3 stuff to the new websites which the new browsers support. Don’t give the older browsers jQuery fallback, but let the browser fallback on the text without the shiny CSS3 effects.
    This will motivate the user to start using the new browser(versions) right?

    I read this on more CSS3 sites and the book i’m reading atm : “The book of CSS3″, and I totally agree to it. More people on this?

    Grtzz

  17. I have been a great fan of CSS3 ! but the thing that is hurting , is the stream of non compatible browsers ! I was upto the animations part on my blog but …
    I guess , I have to wait

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