2012-03-01 6 views
0

イメージサークルを移動せずに実行するには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:私の要素の実行は、これらの上記のコードから http://jsfiddle.net/vLwDc/25/

それが移動します。ここ

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

は私のサンプルコードです少し、どうすれば修正できますか?前もって感謝します 。

+0

なぜそれが揺れているのですか?もしそうならば、それは完全な円ではないので、それはそれのようになりますので、それはそうですね – Val

+0

こんにちは、 私の円は同じように幅と高さではないので、これは私の間違いです – NevenHuynh

+0

私はあなたが何をしようとしている、あなたが完全な円を持っていれば円がアニメーション化されていることをどのように伝えることができますか?基本的には「静的に見えるものをアニメーション化する」 – Val

答えて

1

なぜそれが揺れているのですか?もしそうならば、それは巾幅が違うので、それは完全な円ではないのでそれになります。

関連する問題