FontAwesome 아이콘이 앵커 안의 애니메이션에 적합하지 않습니다.

Question

fontawesome 아이콘을 애니메이트하려고하는데, 아이콘이 앵커 안에있을 때 작동합니다. 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> 

편집 : 당신은 해결 방법으로 그에게 사업부의 아이콘을 감싸고 회전 클래스를 할당 할 수 없습니다?