Question

I use CSS3 Keyframes to make a image circle run without moving, i means like a wheel but circle not moving, it stay as it is.

Here is my CSS code :

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

here is my sample code :
http://jsfiddle.net/vLwDc/25/

From these above code, my element run but it move a little bit, how can i fix it ? thanks in advance .

Answer 1

do you mean why is it wobbly ? if so it’s coz width height are different so it will be like that as it’s not a perfect circle