FontAwesome icônes à l'intérieur des ancres ne pas animer sur chrome

Question

J'essaie d'animer une icône fontawesome, dans une durée, il fonctionne bien, mais quand je mets l'icône dans une ancre, il cesse de travailler sur chrome, sur IE ça marche.

J'utilise FontAwesome 3.2.1 et voici mon code

Html:

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

CSS:

.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); 
    } 
} 

Je l'ai essayé avec FontAwesome 3.0.2 et il fonctionne , quand j'ai mis à jour à 3.2.1 il a cessé de fonctionner, sur le chrome au moins.

Merci à l'avance

Modifier J'ai aussi plus html dans l'ancre et je ne veux pas que tourner afin d'ajouter la classe « rotateur » à l'ancre ne sera pas le faire

Modifier Ceci est le code HTML réel (l'exemple est simplifié ci-dessus):

<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

Ajouter la classe des rotateurs à l'ancre à la place. Il va commencer à tourner sur le chargement de la page, en supposant que c'est ce que vous voulez?

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

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

EDIT: N'êtes-vous pas en mesure d'envelopper l'icône dans un div et attribuer la classe des rotateurs que comme solution de contournement?