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

Question

我正在尝试为 fontawesome 图标设置动画，在 span 内它可以正常工作，但是当我将图标放在锚点内时，它在 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，我不希望它旋转，所以将“旋转器”类添加到锚点不会这样做

编辑 这是实际的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 中并将旋转器类分配给它作为解决方法吗？