@keyframes を使用してマウスアウト時に CSS アニメーションを反転する方法

ホバー後のマウスアウト時に反転アニメーションを実装する方法

Web デザインでは、アニメーションはユーザー エクスペリエンスを向上させる上で重要な役割を果たします。一般的なシナリオの 1 つは、要素をホバリングしてアニメーション (通常は回転) をトリガーすることです。ただし、特に CSS3 の @keyframes を使用する場合、マウス アウト時にアニメーションを反転するのは難しい場合があります。

提供されている CSS の例を考慮すると、ホバー時に要素が 360 度回転しますが、目標は回転して 0 に戻ることです。マウスアウト時の度。 @keyframes アニメーションを使用すると、望ましい効果が得られないようです。

解決策は、アニメーションの方向プロパティを理解することにあります。 「To」はアニメーションの終了状態を表し、「from」は開始状態を指定します。 @keyframes 定義に「from」キーワードを組み込むことで、逆アニメーションを作成できます:

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

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

さらに、ベンダー プレフィックスを使用することでブラウザ間の互換性を確保できます:

@-webkit-keyframes in {
    ...
}

@-webkit-keyframes out {
    ...
}

アニメーションをさらに強化するには、アニメーション方向プロパティを指定することが重要です:

.class {
    animation-direction: alternate;
}

これこのように、マウスが要素の境界から出ると、アニメーションは「イン」から「アウト」にシームレスに移行します。

このアプローチを実装すると、マウスの動きに正確に反応するスムーズで効率的な反転アニメーションが得られます。デモは次のとおりです:

http://jsfiddle.net/JjHNG/35/

以上が@keyframes を使用してマウスアウト時に CSS アニメーションを反転する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。