Вращение элементов, не являющихся гладкими и непрерывными в анимации CSS3

Question

Я хочу сделать анимацию загрузки ajax с помощью CSS3. Все, что я хочу сделать, - вращать эти круги непрерывно с постоянной скоростью. Вот что я сделал до сих пор, но проблема в том, что анимация как-то не гладкая; анимация начинается медленно, быстро идет и заканчивается медленно.

Я прочитал где-нибудь, сделав animation-timing-function:linear;, сделал бы это; Я сделал, но все еще сейчас работаю. Тем не менее это своего рода облегчение анимации.

Может кто-нибудь сказать мне, как я могу это сделать.

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

Вы должны указать функцию ослабления как линейный

.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; 
} 

Вот это fiddle