如何在懸停時無縫轉換 CSS `display` 和 `opacity` 屬性？-css教學-PHP中文網

如何在懸停時無縫轉換 CSS `display` 和 `opacity` 屬性？

Barbara Streisand

發布： 2024-10-30 06:16:27

原創

937 人瀏覽過

How to Seamlessly Transition CSS `display` and `opacity` Properties on Hover?

無縫轉換 CSS 顯示和不透明度屬性

在 CSS3 動畫領域，嘗試轉換多個屬性（特別是顯示和不透明度）時會出現問題。正如您所強調的，當懸停期間修改顯示屬性時，它會破壞不透明度的平滑過渡。

為了解決這個困境，設計了一個創意的解決方案。透過利用 @keyframes 規則，我們本質上定義了一個模仿顯示屬性過渡外觀的自訂動畫。訣竅是從“display: none”優雅地過渡到“display: block”，同時控制元素的不透明度。

Michael 提出的修改後的CSS 程式碼是一個優雅的解決方案：

<code class="css">.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}</code>

登入後複製

在此程式碼中，@keyframes 規則定義了一個命名動畫“fadeInFromNone”，該動畫將元素的不透明度從0 轉換為1，同時將顯示屬性從「none」設定為「block」。計時和緩動功能可以根據需要進行調整。

透過實作此解決方案，您可以輕鬆轉換顯示和不透明度屬性，確保懸停時獲得平滑且視覺上迷人的效果。

以上是如何在懸停時無縫轉換 CSS `display` 和 `opacity` 屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！