在伪元素上设置“显示”属性时，CSS3动画并不总是运行 [英] CSS3 animations don't always run when 'display' attribute is set on a pseudo element

问题描述

我在尝试设置Web字体动画时遇到的问题。具体来说，如果HTML元素具有定义 font-family 的类以及上的其他所需CSS属性：之前元素而不是元素本身，伪内容将不会被动画化。

The problem I am running into occurs when trying to animate a web font. Specifically, if the HTML element has a class that defines the font-family and other needed CSS attributes on the :before element as opposed to the element itself, the pseudo content will not get animated.

以下是一些示例CSS：

Here is some sample 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 选择器。

Now the key part is my fa and fa-before:before selectors.

如果我使用 fa-before 类，则可以正确设置正确的我的：之前内容的字体家族。此外，普通的 fa 也可以在：before 内容（我认为还有其他内容）上正常工作。

If I use the fa-before class, that works fine to set the correct font-family of my :before content. Additionally, plain fa also works fine for the :before content (and I think any other content too).

问题是，如果一个元素在 fa-before 之前没有动画（至少不是所有浏览器对其进行动画处理）。

The problem is, if an element has fa-before, it doesn't animate (at least, not all browsers animate it).

<!-- 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/

Here is a JSFiddle so you can test in your own browser: https://jsfiddle.net/b3gojahs/1/

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

Here are all the browsers I've been able to test:

1. 工作于：
   
   
   
   
   • Mac OS X 10.10.5
     
     
     
     
     • Chrome 47.0.2526.111
     
     

• IE 11.0.10240.16644


• Edge 10.10240.16384.0

• Mac OS X 10.10.5
  
  
  
  
  • Chrome Canary 50.0.2639.0（!!）
  
  
  • Safari 9.0.3（10601.4.4）
  
  
  • Firefox 44.0
  
  
  
  
  • Chrome 48.0.2564.97
  
  
  • Firefox 44.0
  
  

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

  Anyone know why this is occurring? I can't seem to find any articles on this issue.

  推荐答案

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

  问题是因为 i 元素默认为嵌入式元素，CSS转换不适用于嵌入式元素。内联元素不是可变形元素。

  The problem is because i element is an inline element by default and CSS transforms don't work on inline elements. Inline elements are not transformable elements.

  
  

  根据 W3C规范：

  变换适用于可变换元素。

  Transforms apply to transformable elements.

  可转换元素

  可转换元素是以下类别之一的元素：
  其元素布局由CSS框模型控制，该框模型为 块级或原子内联级元素 ，或者其显示属性计算为table-row，table-row-组，表标题组，表页脚组，表单元格或表标题[CSS21]

  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]

  原子内联级元素 strong>

  不是内联框的内联级框（例如替换的内联级元素，内联块元素和内联表元素）称为原子内联级盒子，因为他们参与了n将其内联格式设置上下文作为一个不透明的框。

  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 时类应用于元素，元素的显示通过CSS更改为 inline-block ，因此通过应用的动画。spinning-loader 选择器可以正常工作。

  When the fa class is applied on the element, the element's display is changed to inline-block via the CSS and so the animation that is applied through .spinning-loader selector works as expected.

  但是，将 fa-before 类应用于元素时，仅：在 i 的伪元素之前，将显示更改为 inline-block 。 i 本身的显示设置不会更改，并保留为默认的 inline 设置。因此， i 上的动画无效。

  However when the fa-before class is applied on the element, only the :before pseudo-element of the i gets the display changed to inline-block. The display setting of the i itself doesn't change and it remains as the default inline setting. Because of this, the animation on the i has no effect.

  解决方案是什么？

  解决方案与 Paulie_D的答案。应用变换动画的父 i 元素应作为一个块或一个内联块元素制成。

  Solution is exactly the same that is mentioned in Paulie_D's answer. The parent i element on which the transform animation is applied should be made as a block or an inline-block element.

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

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

  ^{Note: The behavior in Chrome is a bit erratic (atleast on my PC - v43 + Win 7). It starts working automatically when I make any change to the fiddle, close and then reopen it. I have no explanation for this but Firefox is perfect.}

  为什么在某些情况下可以使用浏览器？

  这是我目前没有答案的东西。唯一的原因可能是他们对 i 元素的处理不同，并将其默认显示设置设置为block或inline-block。

  This is something to which I don't have an answer at present. The only reason could be that they treat the i element differently and set its default display setting as block or inline-block.

  这篇关于在伪元素上设置“显示”属性时，CSS3动画并不总是运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！