Animation CSS3为如何使图像循环在不移动的情况下运行设置关键帧

我使用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');
    });

以下是我的示例代码：

---

从上面的代码中，我的元素运行了，但它移动了一点，我如何修复它？提前谢谢。

你是说它为什么会摇晃？如果是这样，因为它的宽度和高度不同，所以它会是这样，因为它不是一个完美的圆

你的意思是它为什么会摆动？如果是这样，因为宽度和高度是不同的，所以它会像这样，因为它不是一个完美的圆Hi Val，这是我的错误，因为我的圆在宽度和高度上不相等我不明白你想做什么，但是如果你有一个完美的圆，你基本上只是“为看起来静态的东西设置动画”是的，当我有一个完美的圆时，我只添加使我的圆从0旋转到360的关键帧，因为我的圆上有一些箭头，所以当圆从0旋转到360时，它看起来像箭头环绕圆，圆可以标记下面的答案。。。