FontAwesomeアイコンがアンカー内にアニメ化しないようにしました。

Question

フォントワームアイコンをアニメーション化しようとしていますが、アンカーの内側にアイコンを置くと、クロムで動作しなくなります。

私はFontAwesome 3.2.1 と、これは私のコードである

Htmlの使用しています：私はFontAwesome 3.0.2でそれを試してみましたが、それが動作

.rotator { 
    display: inline-block; 
    -webkit-animation: rotate 2.5s 4 ease; 
    -webkit-transform-origin:90% 35%; 
} 

@-webkit-keyframes rotate { 
    from { 
     -webkit-transform: rotate(-12deg); 
    } 

    to { 
     -webkit-transform: rotate(112deg); 
    } 
} 

：

<a> 
    <i class="icon-wrench rotator"></i> 
</a> 

CSSを私が3.2.1にアップグレードしたとき、クロムで少なくとも動作は停止しました。事前

編集 で

おかげで私はまた、アンカーの内側のhtmlより多くを持っていると私はそれに

を行うことはありませんアンカーに「回転子」クラスを追加回転させたくありません

編集 これは実際のHTML（上記の例は単純化された）である：回転子クラスを追加

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    <i class="icon-bell-alt icon-animated-bell icon-only"></i> 
    <span class="badge badge-success">5</span> 
</a> 

Answer 1

代わりにアンカーに。これはあなたが望むものと仮定して、ページの読み込み時に回転を開始しますか？

http://jsfiddle.net/7kANu/4/

<a class="rotator"> 
    <i class="icon-wrench"></i> 
</a> 

EDIT：あなたは、回避策として、それにdiv要素のアイコンを包み、回転子のクラスを割り当てることができませんか？