如何使用 @keyframes 反轉滑鼠移出時的 CSS 動畫？

如何實現滑鼠懸停後的反向動畫

在網頁設計中，動畫在增強用戶體驗方面發揮著至關重要的作用。常見的情況是懸停元素來觸發動畫，通常是旋轉。然而，在滑鼠移開時反轉動畫可能具有挑戰性，尤其是在使用 CSS3 的 @keyframes 時。

考慮到提供的 CSS 範例，其中元素懸停時旋轉 360 度，目標是讓它旋轉回 0 度滑鼠移出時的度數。使用@keyframes動畫，似乎達不到想要的效果。

解決方法在於了解animation-direction屬性。 「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 {
    ...
}

為了進一步增強動畫，指定animation-direction屬性至關重要：

.class {
    animation-direction: alternate;
}

這個這樣，當滑鼠移出元素邊界時，動畫將從「內」無縫過渡到「外」。

實現這種方法會產生平滑高效的反向動畫，精確響應滑鼠移動。這是一個示範：

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

以上是如何使用 @keyframes 反轉滑鼠移出時的 CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！