css rotation using webkit-animation - html

Question

I am trying to get a rotation effect with:
#outer {
position:relative;
width:50%;
left:0.3%;
top:0.2%;
-webkit-animation: rotation 30s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
But it wobbles. I'm not sure if it's a CSS issue of just the outer ring isn't a "perfect" circle. Why does it do this?
Outer circle:
You can see a demo here.

Answer 1

The reason it appears to bob up and down is because your image is lopsided. You can test it with this.
<div></div>
<img src="http://i.imgur.com/LbXvgbp.png" width="400" />
<style>
* { position: absolute }
div {
width: 400px;
height: 400px;
border-radius: 50%;
background: #000;
}
</style>
It appears to be elliptical - more wide than tall.

Answer 2

You have -webkit- prefixes for animation and keyframes but for other browsers you need the non-prefixed properties, too (-moz- and -ms- aren't needed for these):
#outer {
-webkit-animation: rotation 30s infinite linear;
animation: rotation 30s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
#keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}

Answer 3

works for me... what browser are you using? If it's not webkit you won't see anything without providing the proper vendor prefixes. This is how i usually write transforms
-webkit-transform:;
-moz-transform:;
-ms-transform:;
transform:;

Answer 4

The #keyframes rule is supported in Internet Explorer 10, Firefox, and Opera.
Safari and Chrome support an alternative, the #-webkit-keyframes rule.
Note: The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.
You should provide rules with and without the -webkit- to support all the current browsers.
#keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
W3Schools