2

アニメーションをスムーズに回転させるのに問題があります。要素の回転が完了すると、「pop」というテキストがわずかに左に移動するのがわかります。フォントサイズによっては、これが発生する場合と発生しない場合がありますが、正確なフォントサイズを設定せずにこれを解決する方法を見つけたいと思っています (フォールバックフォントは同じサイズではなく、同じ問題が発生するため) ）。ブラウザにもよりますが、Chrome では問題なく表示されますが、FireFox でははっきりと確認できます。

FireFox でこれを試してみてください: http://jsfiddle.net/SGVNr/ (一番下のボックスに) テキストのナッジが残っているのがわかりますか?

div {
    height: 100px;
    width: 100px;
    margin: 30px;
    background: blue;
    font: 29px/100px Arial, sans-serif;
    color: #fff;
    text-align: center;
}

#good {
    font-size: 30px;
}

div:hover {
    -webkit-animation: move 0.7s ease-out forwards;
    -moz-animation: move 0.7s ease-out forwards;
    animation: move 0.7s ease-out forwards;
}

@-webkit-keyframes move {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(90deg); }
}

@-moz-keyframes move {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(90deg); }
}

@keyframes move {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}
4

1 に答える 1

2

ID を上部から削除して下部に渡すと、問題が解決します。したがって、font-size:30px問題を修正するクラスを使用して両方の要素を指定します

デモはこちら

編集

かなりの調査とテストの後、21、22、25、27、30、33、34、36、39、41、43、および 45 ピクセルのフォント サイズ (20 ～ 45 ピクセルのみをテストしました) がすべて次のように機能することがわかりました。回転後にジャンプを残さないようにします。この動作は、スタイルに追加/削除した他の属性に関係なく当てはまりました。これは、Firefox の奇妙なレンダリングの問題が原因であることを示唆しています。Firefox フォーラムで報告してください。

于 2013-10-09T03:12:37.380 に答える