首頁 >web前端 >css教學 >如何在滑鼠移開時反轉 CSS 關鍵影格動畫?

如何在滑鼠移開時反轉 CSS 關鍵影格動畫?

Barbara Streisand
Barbara Streisand原創
2024-12-18 04:53:13969瀏覽

How to Reverse CSS Keyframes Animation on Mouse Out?

使用關鍵影格懸停後滑鼠移出時反轉動畫

您正在尋找解決方案,以在滑鼠懸停後反轉滑鼠移出時的旋轉動畫元素。雖然可以使用傳統的 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn