Here's the HTML snippet:
<div class="icon-spinner"> test 1</div>
<div class="parent">
<div class="icon-spinner nonchrome"> test 2</div>
</div>
And this is the accompanying CSS code:
.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);}
}
You can view the demonstration in this jsfiddle link. The spinning "O" next to "Test 1" works correctly in Chrome 39 and IE 10/11, but remains stationary in Safari 8 and Firefox 34. The spinning effect on "test 2" displays correctly in all browsers, although it appears off-center in Firefox.
Despite Safari reportedly lacking support for CSS animations on pseudo-elements, setting "position: absolute" seems to resolve the spinning issue for "test 2." However, why does the spin fail to work on "test 1" in Firefox? Isn't Firefox supposed to have good support for pseudo-element animations?
Although the spin on "test 2" performs well across different browsers, how can I adjust it to ensure proper alignment in Firefox? It functions smoothly but off-centered on MacOS, while on Windows, it tends to be centered better but exhibits noticeable jitteriness.
Moreover, notice the multiple non-breaking spaces within the "test 2" HTML to avoid interference with the animation (which happens automatically in "test 1"). Is there a way to eliminate the necessity for these spaces, if feasible?