在伪元素上设置“显示”属性时,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:
- 工作于:
- Mac OS X 10.10.5
- Chrome 47.0.2526.111
- Mac OS X 10.10.5
- 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 toinline-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 thei
gets the display changed toinline-block
. The display setting of thei
itself doesn't change and it remains as the defaultinline
setting. Because of this, the animation on thei
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屋!