在更改顯示和不透明度時如何創建平滑的 CSS 過渡？-css教學-PHP中文網

在更改顯示和不透明度時如何創建平滑的 CSS 過渡？

Susan Sarandon

發布： 2024-10-30 04:57:03

原創

288 人瀏覽過

How can I create smooth CSS transitions when changing both display and opacity?

透過顯示和不透明度變更建立平滑的CSS 過渡

在Web 開發領域，建立具有視覺吸引力的互動式使用者介面至關重要。 CSS 動畫在實現這一目標方面發揮著至關重要的作用，它使我們能夠在元素的不同狀態之間無縫轉換。

使用 CSS3 動畫時，經常會遇到需要轉換多個屬性的情況，例如不透明度和顯示。然而，組合這些屬性可能會很棘手，因為直接轉換顯示屬性可能會導致突然的變化。

考慮以下 CSS 程式碼：

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

登入後複製

此程式碼旨在淡入元素懸停時的「子」類別。然而，它無法正常工作，因為顯示屬性從“無”到“塊”的直接轉換會產生突然的外觀。

為了解決這個問題，我們可以利用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;
    }
}

登入後複製

在此程式碼中，「fadeInFromNone」關鍵影格動畫用於將不透明度從0 過渡到1，同時還將顯示屬性設為1% 的“ block」避免突然出現。

以上是在更改顯示和不透明度時如何創建平滑的 CSS 過渡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！