Анимация между фоновыми иконками, не работающими в IE - PullRequest
Новая
       19

Анимация между фоновыми иконками, не работающими в IE

1 голос
/ 26 июня 2019

Я создал анимацию для циклического перемещения по набору отдельных иконок FontAwesome.Он работает на последних версиях Firefox и Chrome, но в IE (10, 11, Edge) значок просто не меняется.

Чтобы доказать, что IE хотя бы пытается анимировать, я добавил цветCSS.

Это то, что просто невозможно сделать в IE с одним CSS? 

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>

Ответы [ 2 ]

2 голосов
/ 26 июня 2019

Как я уже прокомментировал, вы можете попробовать с иконками стека: 

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>
1 голос
/ 26 июня 2019

Для 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>
...