Animate between fontawesome icons not working in IE - css

Question

I've created an animation to cycle through a set of individual FontAwesome icons. It is working on latest Firefox and Chrome, but on IE (10, 11, Edge) the icon simply doesn't change.
To prove that IE is at least trying to animate, I've added the colour CSS.
Is this something that just can't be done on IE with CSS alone?
i::before {
animation: battery 5s infinite;
font-size:2em;
}
#keyframes battery {
0% { content: "\f244"; color:red; }
25% { content: "\f243"; color:green; }
50% { content: "\f242"; color:blue; }
75% { content: "\f241"; color:yellow; }
100% { content: "\f240"; color:purple; }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" crossorigin="anonymous">
<i class="fas fa-battery-empty"></i>

Answer 1

As I commented, you can try with stacking icons:
i.fas {
animation: battery 5s infinite;
opacity:0;
color:red;
}
i.fas:nth-child(2) {animation-delay:1s;}
i.fas:nth-child(3) {animation-delay:2s;}
i.fas:nth-child(4) {animation-delay:3s;}
i.fas:nth-child(5) {animation-delay:4s;}
#keyframes battery{
0%,20% { /* 20 = 100 / 5 */
opacity:1;
}
21%,100% {
opacity:0;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" crossorigin="anonymous">
<span class="fa-stack fa-4x">
<i class="fas fa-stack-1x fa-battery-empty"></i>
<i class="fas fa-stack-1x fa-battery-quarter"></i>
<i class="fas fa-stack-1x fa-battery-half"></i>
<i class="fas fa-stack-1x fa-battery-three-quarters"></i>
<i class="fas fa-stack-1x fa-battery-full"></i>
</span>

Answer 2

For IE, you may look instead at text-indent and move the icon steps by steps instead updating the content value.
i::after {
animation: battery 10s infinite;
display: inline-block;
width: 0;
text-indent: -1.25em;
content: " \f244 \f243 \f242 \f241 \f240";
white-space: nowrap;
position:relative;
z-index:-1;
}
i {
overflow: hidden;
font-size: 2em;
}
#keyframes battery {/* update values and steps to your needs */
0% {
text-indent: -1.25em;
color: green;
}
19.9999% {
text-indent: -1.25em;
}
20% {
text-indent: -2.75em;
color: green;
}
39.999% {
text-indent: -2.75em;
}
40% {
text-indent: -4em;
}
59.999% {
text-indent: -4em;
color: blue;
}
60% {
text-indent: -5.25em;
}
79.999% {
text-indent:-5.25em;
color: orange;
}
80% , 100%{
text-indent: -6.5em;
color: red;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" crossorigin="anonymous">
<i class="fas fa-battery-empty"></i>

Answer 3

If you're using the SVG sprites with the JS version of font-awesome then the CSS is slightly different.
The font-awesome JS removes the fas class and turns it into a data-prefix property so you'll have to add an identifier to the <span>
.battery svg {
animation: battery 5s infinite;
opacity: 0;
color: red;
}
.battery svg:nth-child(2) {
animation-delay: 1s;
}
.battery svg:nth-child(3) {
animation-delay: 2s;
}
.battery svg:nth-child(4) {
animation-delay: 3s;
}
.battery svg:nth-child(5) {
animation-delay: 4s;
}
#keyframes battery {
0%, 20% { /* 20 = 100 / 5 */
opacity: 1;
}
21%, 100% {
opacity: 0;
}
}
...
<script src="https://pro.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
<span class="fa-stack fa-4x battery">
<i class="fas fa-stack-1x fa-battery-empty"></i>
<i class="fas fa-stack-1x fa-battery-quarter"></i>
<i class="fas fa-stack-1x fa-battery-half"></i>
<i class="fas fa-stack-1x fa-battery-three-quarters"></i>
<i class="fas fa-stack-1x fa-battery-full"></i>
</span>