您可以使用純 CSS 轉換在延遲後隱藏元素嗎？

延遲後用CSS 隱藏元素

消除了對j​​Query 解決方案的需求，這個問題探討了隱藏元素5 秒是否可行在頁面載入後使用純CSS 過渡。

創新方法

由於CSS 動畫和過渡通常圍繞修改尺寸或可見性等屬性進行，因此隱藏元素的標準方法（例如，將顯示設為隱藏）在這裡不適用。

因此，自訂動畫序列解決了這項挑戰。透過在 5 秒後將高度和寬度設為零，元素可以有效地從視圖中消失，同時仍然不佔用佈局中的任何空間。同時，將可見性設定為隱藏可確保使用者無法察覺。

實作與範例

以下程式碼示範如何實現此功能解決方案：

CSS：

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden; /* In WebKit/Blink browsers */
        overflow: hidden;
    }
}

HTML：

<div>

小提琴：

小提琴： 查看 JSFiddle 上的實際解決方案：[連結到小提琴]

以上是您可以使用純 CSS 轉換在延遲後隱藏元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！