マウスアウト時にリバースCSSアニメーションを作成するには?

ホバー後のマウスアウト時の反転アニメーション

CSS アニメーションを使用してマウスアウト時の反転アニメーションを作成しようとしているときに問題が発生しました。問題を詳しく調べて、最適な解決策を提供しましょう。

最初のコードでは、「rotate」プロパティを持つ単純な CSS 変換アニメーションを使用し、「in」と「out」のキーフレームには「to」がありました。回転を定義する値。ただし、@keyframes アニメーションを使用する場合、トランジション効果を作成するには、キーフレーム内で「from」と「to」の両方の値を指定する必要があります。

反復とアニメーションの必要性を組み込んだ最適なソリューションは次のとおりです。 @keyframes ルールを次のように修正します:

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

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

このコードでは、「in」キーフレームはゼロ回転から始まり 360 度回転します。 「アウト」キーフレームは 360 度の回転から始まり、ゼロ回転に戻り、マウス アウト時に望ましい逆効果を作成します。

ブラウザの互換性に関する考慮事項:

次の点に注意してください。 CSS3 は世界的に完全に実装されているわけではありません。ブラウザ間の互換性を確保するには、ブラウザごとに異なる @keyframes 構文を使用する必要がある場合があります:

• Chrome、Safari (v5): @-webkit-keyframes
• Firefox (v16) ): @keyframes (v5-15: @-moz-keyframes)
• Opera (v15-22): @-webkit-keyframes (v12: @-o-keyframes)
• Internet Explorer (v10 ): @keyframes

コードをさらに強化するために、アニメーションの継続時間と反復回数を指定することもできます。 CSS ルール。

これらの改善を実装するコード スニペットは次のとおりです。

.class {
    animation-name: out;
    animation-duration: 2s;
}

.class:hover {
    animation-name: in;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

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

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

以上がマウスアウト時にリバースCSSアニメーションを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。