Animate between fontawesome icons not working in IE

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>

you can stack the 5 icons and animate the opactiy of each one — Temani Afif, Jun 26 '19 at 14:10
Animating the content property is not supported in IE: https://css-tricks.com/animating-the-content-property/ — heatherhtml, Jun 26 '19 at 14:17
Thanks @heatherhtml - at least that's added confirmation of why it's not happening in IE — freefaller, Jun 26 '19 at 14:19

Temani Afif · Accepted Answer · 2019-06-26T14:28:27.740

3

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>

edited Jun 26 '19 at 14:28

answered Jun 26 '19 at 14:20

Temani Afif

245,468
26
309
415

Sorry, but your snippet doesn't appear to work with IE11? – freefaller Jun 26 '19 at 14:27
@freefaller because of the CSS variable, replace them with `animation-delay:xs` – Temani Afif Jun 26 '19 at 14:27
Excellent - thank you... that's definitely something I can work with. Will get back to you – freefaller Jun 26 '19 at 14:30
Thanks again, also for showing me the `fa-stack-1x` which I wasn't aware of – freefaller Jun 26 '19 at 14:36
1

@freefaller you can find more details in the doc: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons – Temani Afif Jun 26 '19 at 14:37

G-cyr running IE11 · Answer 2 · 2019-06-26T18:27:39.537

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>

Nice idea, but the opacity answer feels like a better solution. Thanks for your input — freefaller, Jun 26 '19 at 14:43

score 0 · Answer 3 · answered May 14 '20 at 00:38

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>

Animate between fontawesome icons not working in IE

3 Answers3