在 IE 中无法使用的 fontawesome 图标之间的动画答案

【问题标题】：Animate between fontawesome icons not working in IE在 IE 中无法使用的 fontawesome 图标之间的动画
【发布时间】：2019-06-26 14:08:23
【问题描述】：

我创建了一个动画来循环浏览一组单独的 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>

【问题讨论】：

您可以将 5 个图标堆叠起来，并对每个图标的不透明度进行动画处理
有趣的方法，我试试看
在 IE 中不支持对 content 属性进行动画处理：css-tricks.com/animating-the-content-property
感谢@heatherhtml - 至少这增加了对为什么它没有在 IE 中发生的确认

标签： css internet-explorer css-animations font-awesome font-awesome-5

【解决方案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>

【讨论】：

抱歉，您的 sn-p 似乎不适用于 IE11？
@freefaller 因为 CSS 变量，将它们替换为 animation-delay:xs
非常好-谢谢...这绝对是我可以使用的。会回复你的
再次感谢您向我展示了我不知道的fa-stack-1x
@freefaller 您可以在文档中找到更多详细信息：fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

【解决方案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>

【讨论】：

好主意，但不透明的答案感觉像是一个更好的解决方案。感谢您的意见

【解决方案3】：

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

font-awesome JS 删除了 fas 类并将其转换为 data-prefix 属性，因此您必须将标识符添加到 <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>

【讨论】：