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它停止工作时，至少在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

将rotator类添加到锚点中。它会在页面加载时开始旋转，假设这是你想要的吗？

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

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

编辑：您是否无法将图标包装在div中并将旋转器类指定为解决方法？

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

1 个答案: