FontAwesome значки внутри якорей, не анимирующих на chrome

Question

Я пытаюсь анимировать шрифт значка, внутри пролета он отлично работает, но когда я помещаю значок внутри якоря, он перестает работать на хроме, на IE он работает.

Я использую FontAwesome 3.2.1 и это мой код

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

Я попробовал его с FontAwesome 3.0.2 и это работает , когда я обновился до 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 и назначить класс ротатора к тому, что в качестве обходного пути?