如何為 CSS 中的隱藏元素添加動畫效果？

CSS 動畫和顯示：無

在CSS 中，為隱藏的元素（例如，顯示：無）設定動畫並不簡單。設定 display: none 會從文件流中刪除元素，但它仍然佔用空間。要解決此問題：

1.設定固定高度：

由於無法在display: none 和display: block 之間進行動畫處理，請將隱藏元素的初始高度固定為顯示時它將佔據的高度。

CSS：

#main-div {
  height: 0;
  display: block;
  overflow: hidden;
  animation-delay: 3.5s;
}

2。使用動畫關鍵幀：

定義一個動畫關鍵幀，將元素從高度 0 過渡到所需高度。

CSS：

@keyframes main-div-slide {
  from {
    height: 0;
  }
  to {
    height: 375px;
  }
}

3。應用動畫：

將動畫關鍵影格與隱藏元素關聯。

CSS：

#main-div {
  animation: main-div-slide 1s ease 3.5s forwards;
}

現在，隱藏元素將無縫地滑落到視圖中，而不影響頁面上其他元素的佈局。

注意：如果隱藏元素的高度固定，則此方法有效。對於動態高度，您可能需要使用 jQuery 或 JavaScript。

以上是如何為 CSS 中的隱藏元素添加動畫效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！