css - 在 IE 中无法使用的 fontawesome 图标之间的动画

问题描述

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

标签： cssinternet-explorercss-animationsfont-awesomefont-awesome-5

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

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>

css - 在 IE 中无法使用的 fontawesome 图标之间的动画

问题描述

解决方案

推荐阅读