css - ホバー時にCSSボタンが「アニメーション」を表示するのはなぜですか?

Question

ボタンに CSS を使用することは、古い Javascript のマウスオーバーよりも優れていることがわかりました。だから私は試してみようと思いました。

ロゴにロールオーバー用の新しいコードを配置すると。ロゴの上にマウスを移動すると気がつきました。ロゴは、画像を「交換」するのではなく、アニメーションを「回転」させます。なぜそれをするのだろうと思っていましたか？

リンクを見て試すことができます: http://www.streetlightministries.ca/2013 - マウスをロゴの上に動かしてください - あなたは私が話していることを見ることができます.

あなたが私を助けてくれることを願っています。

ありがとう！

Answer 1

問題はおそらく、すべての<a>要素に適用するこの CSS 定義にあります。

transition: all 0.5s ease 0s;

画像としてスプライトを使用しているということと合わせて、表示されているスプライトの部分の変化をトランジションでアニメーション化しています。

これを克服するには、アニメーション化する遷移をより詳細に指定するか、次のような方法でロゴの遷移をキャンセルします。

#logo {
  transition: none;
}

Answer 2

それは「転移」のせいです。CSS で、トランジション要素をアンカーから削除します。または、#logo に「transition:none」を追加します。

Answer 3

transition: noneを使用する理由 外すだけ！