I am using CSS3 Keyframes to create an image circle that appears to be running like a wheel without actually moving from its position.
Below is the CSS code I have implemented:
.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 a sample of my code : http://jsfiddle.net/vLwDc/25/
After implementing the above code, my element seems to move slightly. How can I correct this issue? Thank you in advance.