CSS 轉場或動畫能否在 5 秒後自動隱藏元素？

CSS 5秒後自動隱藏元素

問題來了：頁面載入後五秒隱藏元素是否可行？ jQuery 解決方案是已知的，但其目的是使用 CSS 轉換來複製它。是否可能，或超出 CSS 過渡/動畫的能力？

答案

答案是肯定的！但是，它無法以預期的方式完成，因為不可能對通常用於隱藏元素的屬性進行動畫或轉換（例如顯示或更改尺寸以及設定為溢出：隱藏）。

相反，動畫是為相關元素創建的。五秒後，可見性：隱藏；被切換，同時高度和寬度設定為零以防止元素佔用 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 轉場或動畫能否在 5 秒後自動隱藏元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！