CSS 轉場可以在設定時間後自動隱藏元素嗎？

使用 CSS 轉換自動隱藏元素

你能讓元素在頁面載入後 5 秒消失嗎？雖然 jQuery 解決方案是已知的，但本文探討如何使用 CSS 過渡來實現相同的效果。

可能嗎？

可以，但不是以傳統方式。通常，過渡會應用於顯示、尺寸或溢出等屬性。然而，這些屬性直接控制元素的可見性和空間佔用。

創新解決方案

要繞過此限制，請為目標元素建立動畫。 5 秒後，將其可見性切換為隱藏。此外，將其高度和寬度設為零，以防止其佔用文件流中的空間。

示例實現

CSS:

#hideMe {
  -webkit-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;
    overflow: hidden;
  }
}

HTML:

<div>

這段程式碼設定了一個動畫頁面載入後 5秒將元素縮小到零尺寸。元素在保持其在文件流程中的位置的同時被隱藏。

結論

雖然隱藏元素的傳統方法可能不直接適用，但使用可見性切換和零尺寸與CSS 動畫相結合，為在指定時間間隔後自動隱藏元素提供了創新的解決方案。

以上是CSS 轉場可以在設定時間後自動隱藏元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！