fontawesome 图标之间的动画在 IE 中不起作用

Question

我创建了一个动画来循环显示一组单独的 FontAwesome 图标。它适用于最新的 Firefox 和 Chrome，但在 IE（10、11、Edge）上，图标根本没有改变。

为了证明 IE 至少在尝试动画，我添加了颜色 CSS。

这是仅靠 CSS 无法在 IE 上完成的事情吗？

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

正如我评论的那样，您可以尝试使用堆叠图标：

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

对于 IE，您可以查看 text-indent 并逐步移动图标而不是更新内容值。

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

如果您将 SVG 精灵与 JS 版本的 font-awesome 一起使用，那么 CSS 会略有不同。

font-awesome JS 删除了 fas class 并将其转换为数据前缀属性因此您必须向 <span>[=13 添加标识符=]

.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>

fontawesome 图标之间的动画在 IE 中不起作用

Animate between fontawesome icons not working in IE

css

internet-explorer

css-animations

font-awesome

font-awesome-5