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，您可以查看文本缩进，然后逐步移动图标，而不更新内容值。

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会稍有不同。

字体超赞的JS删除了fas类并将其转换为数据前缀属性，因此您必须向<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>

在IE中无法使用的fontawesome图标之间进行动画处理

3 个答案: