Rotation of elements not being smooth and continous in CSS3 animation - html

Question

I want to make an ajax loading animation using CSS3. All I want to do is to rotate these circles continuously with a constant speed. Here's what I did so far, but the problem is the animation somehow isn't being smooth; animation starts slow, is fast in between and ends slowly.
I read somewhere making animation-timing-function:linear; would do this; I did, but still now working. Still it is kind of easing animation.
Can anybody tell me how can I make this that way.
Markup:
<div class="ajax">
<div class="round outer"></div>
<div class="round inner"></div>
</div>
CSS:
.ajax {position: relative; }
.round {border: 5px solid #555; position: absolute; height: 40px; width: 40px; border-radius: 50%; }
.round.inner {margin: 12px; }
.round.outer {padding: 12px; }
.round.outer:before {content: ''; position: absolute; height: 7px; width: 5px; background: #fff; top: -5px; left: 29px;}
.round.inner:after {content: ''; position: absolute; border: 5px solid transparent; border-bottom: 7px solid #555; left: 15px; top: -15px; }
.round.inner:before {content: ''; position: absolute; width: 5px; height: 7px; background: #fff; bottom: -7px; left: 18px;}
#keyframes ajax-rotate
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes ajax-rotate
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
#keyframes ajax-rotate-c
{
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
#-webkit-keyframes ajax-rotate-c
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-360deg);}
}
.ajax .round {
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
.ajax .round.inner{
animation: ajax-rotate 2s infinite;
-webkit-animation: ajax-rotate 2s infinite;
}
.ajax .round.outer{
animation: ajax-rotate-c 2s infinite;
-webkit-animation: ajax-rotate-c 2s infinite;
}

Answer 1

You need to specify easing function as linear
.ajax .round.inner{
animation: ajax-rotate 2s infinite linear;
-webkit-animation: ajax-rotate 2s infinite linear;
}
.ajax .round.outer{
animation: ajax-rotate-c 2s infinite linear;
-webkit-animation: ajax-rotate-c 2s infinite linear;
}
Here is the fiddle