僅使用 CSS 可以在 5 秒後隱藏元素嗎？

CSS 在 5 秒後自動隱藏元素

您可以使用 CSS 在頁面載入後 5 秒隱藏元素嗎？ jQuery 解決方案當然是可行的，但是可以使用 CSS 轉換來實現這一點嗎？

答案：是的

但是，有一個轉折。 CSS 過渡不能應用於「顯示」或尺寸等屬性以實現真正的隱藏。相反，為該元素創建一個動畫，並在 5 秒後將其可見性切換為「隱藏」。同時，將高度和寬度設置為零，以防止佔用DOM 空間

示例

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div>

這種方法使用 CSS 過渡來實現所需的結果，隱藏元素在指定的延遲後不會影響頁面的流程。

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