Changing :before content with animation - css

Question

I'm trying to change a CSS pseudo :before element content with animation similar to jsfiddle here.
#thing:before
{
content:"TEST00";
background-color:rgba(200,200,200,0.8);
animation:sideText 30s ease-in-out infinite;
}
#keyframes sideText
{
0% {content:"TEST1A";background-color:rgba(180,90,200,0.8)}
30%{content:"TEST1B"}
32%{content:"TEST2A";background-color:rgba(80,190,200,0.8)}
60%{content:"TEST2B"}
62%{content:"TEST3A";background-color:rgba(80,90,20,0.8)}
98%{content:"TEST3B"}
100%{content:"TEST1C"}
}
Works great in Chrome, only background changes in Firefox & Safari.
Is this something i should just accept as not working in these 2 browsers or is there another way to do this?
I've tried different vendor prefixs without sucess either.

Answer 1

The content property is not animatable per the CSS spec (CSS Spec) (MDN Reference) but, for whatever reason, Chrome allows this.
CSS-Tricks Article by Chris Coyier
In my own testing animating content has only worked in stable desktop Chrome (v46 at time of writing). No support anywhere else. No Safari on desktop or iOS. No Firefox. No IE. Each of these browsers will ignore the animation, showing only the original content in the pseudo element.
It might be a handy trick in some distant future or it might never be supported by anything. Non-standard features are always at least at some risk of being deprecated, so this Chrome support may not last forever.

Answer 2

A workaround can be achieved using a content with several lines, and clipping it
(I am using the now obsolete clip property, but it can be easily adapted to clip-path)
#thing {
position: absolute;
width: 100px;
height: 30px;
background-color: rgba(80, 90, 200, 0.8)
}
#thing:before {
content: "TEST1A\aTEST1B\aTEST2A";
background-color: rgba(200, 200, 200, 0.8);
animation: sideText 5s infinite;
position: absolute;
white-space: pre;
line-height: 20px;
}
#keyframes sideText {
0%, 33% {
clip: rect(0px 120px 20px 0px);
top: 0px;
}
33.01%,
66% {
clip: rect(20px 120px 40px 0px);
top: -20px;
}
66.01%,
100% {
clip: rect(40px 120px 60px 0px);
top: -40px;
}
}
<div id="thing">
</div>