Ключевые кадры CSS3, как сделать так, чтобы круг изображения работал без движения

Question

Я использую ключевые кадры CSS3, чтобы круг изображения работал без движения, я имею в виду как колесо, но круг не движется, он остается как есть.

Вот мой код CSS:

.step_7 { 
background: url(../images/step7.png) no-repeat center top, url(../images/outer_glow.png) no-repeat 0 -7px; 
top: 377px;
left: 417px;
width:102px;
height: 104px;
z-index: 4;
}
@-webkit-keyframes circle-run 
{
    0%{
        -webkit-transform:rotate(0deg);
    }
    100% 
    {
        -webkit-transform:rotate(360deg);
    }
}

.animation {
    -webkit-animation: circle-run 2s infinite;
    -webkit-animation-timing-function:linear;
}

Javascipt:

 $('.btn1_inv').click(function () {
        $('.step_7').addClass('animation');
    });

вот мой пример кода: http://jsfiddle.net/vLwDc/25/

Из приведенного выше кода мой элемент запускается, но он немного сдвинется, как я могу это исправить?заранее спасибо.

Answer 1

Вы имеете в виду, почему это шатко?если это так, потому что ширина ширина отличается, так что это будет так, как это не идеальный круг