伪元素的CSS动画可在Chrome和IE中使用，但在Safari和Firefox中是固定的，没有"position:absolute"

问题描述

使用此HTML:

<div class="icon-spinner"> test 1</div>
<div class="parent">
    <div class="icon-spinner nonchrome"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; test 2</div>
</div>

这个CSS:

.icon-spinner:before{
    animation: spin 0.5s infinite linear;
    -webkit-animation: spin 0.5s infinite linear;
    content:"O";
    font-size: 30px;
}

.parent {
    position: relative;
}

.icon-spinner.nonchrome:before{
    position: absolute;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

在此jsfiddle 中可以看到，测试1"旁边的大写字母"O"正常旋转在Chrome 39和IE 10/11中，但是在Safari 8和Firefox 34中是固定的."test 2"旁边的O在每个浏览器中都会旋转，但是在Firefox中它的旋转偏离中心.

As seen in this jsfiddle, the capital "O" next to "Test 1" spins normally in Chrome 39 and IE 10/11, but is stationary in Safari 8 and Firefox 34. The O next to "test 2" spins in every browser, but its spin is off-center in Firefox.

Safari可能不支持在伪元素上使用CSS动画...但是为什么设置"position:absolute"可以解决Safari中"test 2"旋转的问题?为什么Firefox中的测试1"旋转失败了?它应该是伪元素动画的最长支持者.

Safari supposedly doesn't support using CSS animation on pseudo-elements... but then why does setting "position: absolute" fix the "test 2" spin in Safari? And why is the "test 1" spin broken in Firefox? It's supposed to have been the longest supporter of pseudo-element animation.

既然"test 2"自旋在每种浏览器中都有效，那么如何在Firefox中修复它呢?在OSX上，它很平滑，但偏离中心.在Windows中，它的居中效果更好，但确实令人不安.

Since the "test 2" spin works in every browser, how can I fix it in Firefox? On OSX it's smooth, but off-center. While in Windows, it's centered better, but really jittery.

如您所见，我在测试2" html中有几个不间断的空格，以使内容移出动画的方式(在测试1"中自动完成).如果可能的话，如何避免这种情况?

And as you can see, I've got several non-breaking spaces in the "test 2" html, to make the content move out of the way of the animation (which is done automatically in "test 1"). How can I avoid the need for that, if possible?

推荐答案

http://jsfiddle.net/3j5u8w77/54/

icon-spinner:before{
    animation: spin 0.5s infinite linear;
    -webkit-animation: spin 0.5s infinite linear;
    content:"O";
    font-size: 30px;
    height: 30px;
    display:inline-block;
}

.parent {
    position: relative;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

我想是一个局部解决方案.如果使用display:伪元素safari上的inline-block可以动画化'O'，而无需"position:absolute".至于在firefox中偏离中心旋转，如果我明确将高度设置为30px，以确保Firefox知道'O'到底有多大，则旋转是死点.但这改变了野生动物园旋转"O"的方式，因此使我相信，由于浏览器呈现字体的方式，"O"在不同的浏览器中被视为大小不同.也许明确为此元素设置大小并设置确切的transform-origin属性以确保旋转始终居中

I guess a partial solution. If you use display: inline-block on the pseudo element safari can animate the 'O' just fine without the "position:absolute". As for the off centre spin in firefox if I explicitly set the height to 30px to make sure that firefox knows how big the 'O' is exactly so the rotation is dead centre. But this changes the way that safari rotates the 'O' so this leads me to believe that the 'O' is being seen as different sizes in different browsers due to the way browsers render fonts. Perhaps explicitly set a size for this element and set an exact transform-origin property to ensure the rotation is always centred

这篇关于伪元素的CSS动画可在Chrome和IE中使用，但在Safari和Firefox中是固定的，没有"position:absolute"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！