如何使用 CSS 過渡在延遲後自動隱藏元素？

CSS 轉換：延遲後自動隱藏元素

可以透過多種方法實現在特定時間間隔後隱藏網頁上的元素。雖然 jQuery 提供了一個簡單的解決方案，但 CSS 過渡提供了一個創新的替代方案來實現相同的結果。

方法：

儘管CSS 過渡在直接對屬性進行動畫處理方面存在局限性，例如顯示，可以透過利用動畫和操作元素可見性來模擬元素隱藏。

實作：

1. 建立所需持續時間的 CSS 動畫（5在本例中為秒）使用@keyframes。
2. 在動畫中，將元素的高度和寬度設為零以使其消失。
3. 使用animation-fill-mode:forwards;確保元素在動畫結束後保持隱藏狀態。
4. 動畫延遲（5秒）後，切換visibility:hidden;在元素上將其從視圖中完全刪除。

小提琴：

以下小提琴示範了CSS 實作：

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    animation: cssAnimation 0s ease-in 5s forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}

<div>

此技術可以在指定的時間間隔後有效隱藏元素，防止它們佔據頁面上的任何可見空間。

以上是如何使用 CSS 過渡在延遲後自動隱藏元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！