如何在 CSS 動畫中平滑過渡顯示和不透明度屬性？-css教學-PHP中文網

如何在 CSS 動畫中平滑過渡顯示和不透明度屬性？

Barbara Streisand

發布： 2024-11-02 16:37:31

原創

709 人瀏覽過

How to smoothly transition both display and opacity properties in CSS animations?

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

在 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;
}

登入後複製

此程式碼無法轉換顯示屬性，導致突然出現元素的外觀。為了實現兩個屬性的平滑過渡，建議使用以下技術：

.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;
    }
}

登入後複製

此方法利用 CSS 動畫 fadeInFromNone 來控制兩個屬性的過渡。動畫從元素隱藏且完全透明開始（顯示：無；不透明度：0）。然後，它會短暫地使元素可見，但保留其透明度（顯示：區塊；不透明度：0）以觸發顯示轉換。最後，元素變得完全可見且不透明（顯示：塊；不透明度：1）。可以透過調整動畫規則中的計時和緩動功能來自訂顯示和不透明度的過渡。

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