首頁 >web前端 >css教學 >如何在滑鼠懸停時創建反向 CSS 動畫?

如何在滑鼠懸停時創建反向 CSS 動畫?

Susan Sarandon
Susan Sarandon原創
2024-12-08 10:11:10344瀏覽

How to Create a Reverse CSS Animation on Mouseout?

懸停後滑鼠移出時的反向動畫

您在嘗試使用CSS 動畫建立滑鼠移出時的反向動畫時遇到問題。讓我們深入研究問題並提供最佳解決方案。

在您的初始程式碼中,您使用了帶有「旋轉」屬性的簡單 CSS 變換動畫,並且「入」和「出」關鍵影格具有「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)
  • 歌劇(v15-22): @-webkit-keyframes (v12: @-o-keyframes)
  • Internet Explorer (v10 ): @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中文網其他相關文章!

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