マウスアウト時に CSS キーフレーム アニメーションを反転する方法

キーフレームを使用してホバー後のマウスアウト時にアニメーションを反転する

マウスをホバーした後のマウスアウト時に回転アニメーションを反転するソリューションを探しています。要素。従来の CSS 変換を使用することも可能ですが、@keyframes アニメーションを使用して実装するときに問題が発生しました。

最適な解決策には、キーフレーム内で「to」値と「from」値の両方を使用することが含まれます。修正されたコードは次のようになります:

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

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

ただし、ブラウザーの互換性を考慮することが重要です。 CSS3 は広くサポートされていますが、互換性を最大限に高めるためにベンダー プレフィックスを使用することをお勧めします:

@-webkit-keyframes in { /* Safari, Chrome */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-webkit-keyframes out { /* Safari, Chrome */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

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

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

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

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

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