5

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 で試してみたところ、少なくとも chrome では動作しなくなりました。3.2.1 にアップグレードすると動作しなくなりました。

前もって感謝します

編集 アンカー内にさらに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>
4

1 に答える 1

0

代わりに、rotator クラスをアンカーに追加してください。これがあなたが望むものであると仮定すると、ページの読み込み時に回転し始めますか?

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

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

編集: 回避策として、アイコンを div でラップし、ローテーター クラスをそれに割り当てることはできませんか?

于 2013-06-20T23:42:28.787 に答える