マウスアウト時に CSS キーフレーム アニメーションをスムーズに反転するにはどうすればよいですか?

マウス アウト時のアニメーションの反転: 課題への対処

Web アニメーションの領域では、マウス アウト時のスムーズなアニメーションの反転を実現することができます。特にキーフレーム アニメーションを使用する場合は、注意が必要です。最適な結果を得るために CSS キーフレームの複雑さを掘り下げて、元の質問とその解決策を探ってみましょう。

問題

最初の調査で概説したように、次のことを試みています。キーフレームを使用してホバー アニメーションを反転するマウスアウト アニメーションを作成するのは困難であることがわかっています。このコード スニペットは、ホバーでは動作するが、マウス アウトでは元の状態に戻らない、基本的な変形回転アニメーションを示しています。

解決策

達成の鍵望ましいアニメーションの反転は、キーフレーム宣言内の「from」プロパティと「to」プロパティの両方を利用することにあります。 「in」キーフレームで初期変換状態 (「from」) を指定し、「out」キーフレームで最終変換状態 (「to」) を指定することで、2 つの間のスムーズな遷移を効率的に作成できます。

最適な実装

ブラウザ間の互換性を確保するには、異なるブラウザに対して正しいキーフレーム構文を使用することが重要です。ブラウザ。これらの考慮事項を考慮した更新された CSS コードは次のとおりです。

@-webkit-keyframes in {
  from: transform: rotate(0deg);
  to: transform: rotate(360deg);
}

@-moz-keyframes in {
  from: transform: rotate(0deg);
  to: transform: rotate(360deg);
}

@-o-keyframes in {
  from: transform: rotate(0deg);
  to: transform: rotate(360deg);
}

@keyframes in {
  from: transform: rotate(0deg);
  to: transform: rotate(360deg);
}

@-webkit-keyframes out {
  from: transform: rotate(360deg);
  to: transform: rotate(0deg);
}

@-moz-keyframes out {
  from: transform: rotate(360deg);
  to: transform: rotate(0deg);
}

@-o-keyframes out {
  from: transform: rotate(360deg);
  to: transform: rotate(0deg);
}

@keyframes out {
  from: transform: rotate(360deg);
  to: transform: rotate(0deg);
}

このコードは、アニメーションが主要なブラウザーで正しく機能することを保証し、ホバーからホバー以外の状態にスムーズに移行するシームレスなアニメーション エクスペリエンスを提供します。状態。

以上がマウスアウト時に CSS キーフレーム アニメーションをスムーズに反転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。