CSS3關鍵幀如何在不移動的情況下使圖像圈運行

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

這裏是我的示例代碼： http://jsfiddle.net/vLwDc/25/

從這些上面的代碼中，我的元素運行，但它移動一點點，我該如何解決它？提前致謝。

來源

2012-03-01 NevenHuynh

你的意思是爲什麼它搖擺不定？如果是這樣，它是真正的寬度高度是不同的，所以它會是這樣，因爲它不是一個完美的圓圈 – Val 2012-04-30 09:29:11

嗨瓦爾，這是我的錯誤，因爲我的圓是不同的寬度和高度 – NevenHuynh 2012-05-01 10:30:23

我不明白你想做什麼，但是，如果有人知道如果你有一個完美的圓圈，圓圈就是動畫，那麼你怎麼能說出來？你基本上只是「動畫看起來很靜態的東西」 – Val 2012-05-01 12:53:03

你是說爲什麼它搖擺不定？如果是這樣，它的寬度高度是不同的，所以它會是這樣，因爲它不是一個完美的圓圈

來源

2012-05-03 11:47:41 Val

CSS3關鍵幀如何在不移動的情況下使圖像圈運行

回答

相關問題