5

我正在尝试为 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，我不希望它旋转，所以将'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>
4

1 回答 1

0

而是将旋转器类添加到锚点。假设这是您想要的，它将在页面加载时开始旋转？

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

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

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

于 2013-06-20T23:42:28.787 回答