使用此HTML：
<div class="icon-spinner"> test 1</div>
<div class="parent">
<div class="icon-spinner nonchrome"> 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所示，在Chrome 39和IE 10/11中，“测试1”旁边的大写字母“ O”通常会旋转，但在Safari 8和Firefox 34中是固定的。在每个浏览器中，“测试2”旁边的O都会旋转。 ，但它的旋转在Firefox中偏离中心。
Safari可能不支持在伪元素上使用CSS动画...但是，为什么设置“ position：absolute”可以修复Safari中的“ test 2”旋转？为什么Firefox中的“测试1”旋转失败了？它应该是伪元素动画的最长支持者。
由于“ test 2”旋转适用于所有浏览器，因此如何在Firefox中进行修复？在OSX上，它很平滑，但偏离中心。在Windows中，它的居中效果更好，但确实令人不安。
正如您所看到的，“测试2” html中有几个不间断的空格，以使内容脱离动画的方式（在“测试1”中自动完成）。如果可能的话，我该如何避免这种需要？
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属性以确保旋转始终居中
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句