锚内的FontAwesome图标没有动画在chrome上

Question

我正在尝试动画一个fontawesome图标,在一个范围内工作正常,但当我把图标放在一个锚点,它停止工作在Chrome上,在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它停止工作,至少在chrome上.

提前致谢

编辑 我在锚点内也有更多的html,我不希望它旋转,所以将'rotator'类添加到锚点不会这样做

编辑 这是实际的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>

编辑：您是否无法将图标包装在 div 中并将旋转器类分配给它作为解决方法？