CSS3动画不会在“显示”时始终运行。属性在伪元素上设置

Question

尝试动画网络字体时，遇到了我遇到的问题。具体来说，如果HTML元素具有一个类，该类在font-family元素上定义:before和其他所需的CSS属性而不是元素本身，则伪内容将不获取动画。

以下是一些示例CSS：

@font-face {
  font-family: 'FontAwesome';
  src: /** src urls here... **/
}

.fa-before:before,
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-refresh:before {
  content: "\f021";
}

.spinning-loader {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

现在关键部分是我的fa和fa-before:before选择器。

如果我使用fa-before类，则可以正常设置font-family内容的:before。此外，普通fa也适用于:before内容（我认为还有其他任何内容）。

问题是，如果某个元素具有fa-before，则它不会设置动画（至少不会所有浏览器为其设置动画效果）。

<!-- This doesn't always animate -->
<i class="fa-before icon-refresh spinning-loader"></i>

<!-- This DOES always animate -->
<i class="fa icon-refresh spinning-loader"></i> 

什么时候有效：

什么时候不起作用：

这是一个JSFiddle，因此您可以在自己的浏览器中进行测试：https://jsfiddle.net/b3gojahs/1/

以下是我能够测试的所有浏览器：

1. 适用于：
   • Mac OS X 10.10.5
     • Chrome 47.0.2526.111
   • Windows 10.0.10240
     • IE 11.0.10240.16644
     • Edge 10.10240.16384.0
2. 不能工作：
   • Mac OS X 10.10.5
     • Chrome Canary 50.0.2639.0（!!）
     • Safari 9.0.3（10601.4.4）
     • Firefox 44.0
   • Windows 10.0.10240
     • Chrome 48.0.2564.97
     • Firefox 44.0

任何人都知道为什么会这样吗？我似乎无法找到关于这个问题的任何文章。

Answer 1

问题似乎是设置

.fa-before:before{
  display: inline-block;
}

你只是做这个

.fa-before {
  display: inline-block;
}

它运作得很好 - JSFiddle

Answer 2

为什么动画在应用fa-before类之前不起作用？

问题是因为i element is an inline element by default和CSS转换不适用于内联元素。内联元素不是可转换元素。

  

根据W3C Spec：

     

转换适用于可转换元素。

     

可转换元素

     

可转换元素是以下类别之一的元素：   布局由CSS框模型控制的元素， 是块级或原子内联级元素 ，或者其显示属性计算到表行，表-row-group，table-header-group，table-footer-group，table-cell或table-caption [CSS21]

     

原子内联级元素

     

非内联框的内联级框（例如替换的内联级元素，内联块元素和内联表元素）称为原子内联级框，因为它们作为单个参与其内联格式化上下文不透明的盒子。

当在元素上应用fa类时，元素的显示通过CSS更改为inline-block，因此通过.spinning-loader选择器应用的动画可以正常工作正如所料。

但是，当在元素上应用fa-before类时，只有:before的{​​{1}}伪元素才会将显示更改为i。 inline-block本身的显示设置不会更改，并且仍为默认i设置。因此，inline上的动画无效。

解决方案是什么？

解决方案与Paulie_D's answer中提到的完全相同。应用变换动画的父i元素应该作为块或内联块元素。

i

^{注意： Chrome中的行为有点不稳定（至少在我的电脑上 - v43 + Win 7）。当我对小提琴进行任何更改时，它会自动开始工作，关闭然后重新打开它。我对此没有任何解释，但Firefox是完美的。}

为什么它适用于某些浏览器？

目前我还没有回答这个问题。唯一的原因可能是它们对i.spinning-loader {display: inline-block;} /* this setting should solve it */ 元素的处理方式不同，并将其默认显示设置设置为块或内联块。