Transitions and Animations on CSS Generated Content

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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.