Transitions and Animations on CSS Generated Content
Published by Chris Coyier
Generated content means pseudo elements added to the page via the
::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.
|3.6 and down||Unsupported|
|4.0 and up||Supported|
|6.0.5 and down||Unsupported - bug report|
|6.1 and up||Supported|
|25 and down||Unsupported|
|26 and up||Supported - Fixed January 3, 2013|
|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|
|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.