Using CSS3 transforms/animations with font-face produces “wobbly” spinner gif-like

Question

I\'m using CSS transforms/animations with font-face (twitter bootstrap/font-awesome) to produce a spinner gif-like icon.

The problem is that the icon wobbles as it revol

Answer 1

How I solved my issue with out-of-center rotation of icon font: There were several issues I had to resolve: 1. size of icon: it has to be whole px size (e.g. font-size:small; makes my icon 17.5px so center is not absolute center for transformation) 2. defining display: block on icon level makes it center correctly in the middle of the parent div 3. defining exact square size of parent div (in my case button) and fixed padding made it center correctly 4. adding any text-shadow will change the size of the inner icon so it will be out of the center. Trick is to change the hover style to be the same shadow with color same as background in my case

So here is the code:

CSS:

button.close {
padding: 10px;
opacity: 0.8;
text-shadow: 1px 1px 1px #999; 
width: 40px;
height: 40px;
}
button.close i{
font-size: 20px;
max-width: 20px;
max-height: 20px;
display: block;
}
button.close:hover {
text-shadow: 1px 1px 1px #fff; 
}
/* rotation CSS*/
@keyframes anim-rotate {
0% {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes anim-rotate-next {
0% {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotate{
animation: anim-rotate-next 1s normal linear;
}
.rotate.down{
animation: anim-rotate 1s normal linear;
}

HTML:

and finally JQuery for switching rotate class JQuery:

$("#parentDiv").on('click', 'i.lnr-sync', function () {
// rotiraj ikonu
$(this).toggleClass("down");
});