Các biểu tượng FontAwesome bên trong neo không hoạt ảnh trên chrome

Question

Tôi đang cố gắng tạo hiệu ứng cho một biểu tượng fontawesome, bên trong một khoảng thời gian nó hoạt động tốt, nhưng khi tôi đặt biểu tượng bên trong một neo nó ngừng hoạt động trên chrome, trên IE nó hoạt động.

Tôi đang sử dụng FontAwesome 3.2.1 và đây là mã của tôi

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

Tôi đã thử nó với FontAwesome 3.0.2 và nó hoạt động , khi tôi nâng cấp lên 3.2.1 nó ngừng hoạt động, ít nhất là trên chrome.

Cảm ơn trước

Sửa Tôi cũng có nhiều html bên trong neo và tôi không muốn điều đó để xoay để thêm các lớp 'rotator' để neo sẽ không làm điều đó

Sửa Đây là html thực tế (ví dụ trên được đơn giản hóa):

<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

Thêm lớp rotator để neo thay thế. Nó sẽ bắt đầu xoay khi tải trang, giả sử đây là những gì bạn muốn?

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

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

EDIT: Bạn không thể quấn vào biểu tượng trong một div và gán lớp rotator đó như một cách giải quyết?