CSS3 当在伪元素上设置 'display' 属性时，动画并不总是运行

Question

我运行遇到的问题是在尝试为 Web 字体设置动画时出现的。具体来说，如果 HTML 元素有一个 class 定义了 font-family 和其他需要的 CSS 属性，而不是元素本身， :before 元素，伪内容将不会动画化。

这是一些示例 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 class，可以很好地设置 :before 内容的正确 font-family。此外，普通 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/

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

工作于：
- Mac OS X 10.10.5
  - Chrome 47.0.2526.111
- Windows 10.0.10240
  - IE 11.0.10240.16644
  - 边缘 10.10240.16384.0
不适用于：
- Mac OS X 10.10.5
  - Chrome 金丝雀 50.0.2639.0 (!!)
  - 野生动物园 9.0.3 (10601.4.4)
  - 火狐 44.0
- Windows 10.0.10240
  - Chrome 48.0.2564.97
  - 火狐 44.0

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

Answer 1

问题似乎是设置

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

你只是做这个吗

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

它工作得很好 - JSFiddle

Answer 2

为什么应用fa-before class时动画不工作？

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

As per W3C Spec:

Transforms apply to transformable elements.

transformable element

A transformable element is an element in one of these categories: an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

atomic inline-level element

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

当 fa class 应用于元素时，元素的显示通过 CSS 更改为 inline-block，因此通过 .spinning-loader 选择器按预期工作。

然而，当 fa-before class 应用于元素时，只有 i 的 :before 伪元素显示更改为 inline-block. i 本身的显示设置不会改变，它仍然是默认的 inline 设置。因此，i 上的动画没有效果。

解决方法是什么？

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

i.spinning-loader {display: inline-block;} /* this setting should solve it */

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

为什么它可以在某些浏览器上运行？

这是我目前没有答案的问题。唯一的原因可能是他们以不同方式对待 i 元素并将其默认显示设置设置为块或内联块。

CSS3 当在伪元素上设置 'display' 属性时，动画并不总是运行

CSS3 animations don't always run when 'display' attribute is set on a pseudo element

css

css-transforms

css-animations

CSS3 当在伪元素上设置 'display' 属性时，动画并不总是 运行

CSS3 animations don't always run when 'display' attribute is set on a pseudo element

css

css-transforms

css-animations

CSS3 当在伪元素上设置 'display' 属性时，动画并不总是运行