如何在 CSS 中使用「display: none」對 Div 進行動畫處理？

CSS 動畫和顯示無

嘗試使用 CSS 對 div 進行動畫處理時，了解 display 屬性的限制非常重要。同時顯示：無；屬性可以隱藏視圖中的元素，但不會將其從文件流程中刪除。這可能會導致在對佔用頁面空間的元素進行動畫處理時出現問題。

要達到所需的效果，您無法直接從 display: none; 切換主 div；顯示：區塊；。相反，您需要將主 div 的高度設為 0 並使用 Overflow:hidden;最初隱藏它。然後，當主 div 滑入時，您可以將 div 的高度設定為所需的動畫值。

這是一個範例：

#main-div {
    height: 0;
    overflow: hidden;
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

#main-div.fadeInDownBig {
    height: 375px;
}

這將導致主 div 在 3.5 秒後滑入，在進入視窗時將其他 div 向下推到頁面上。

請注意，此技術也適用於其他屬性，例如不透明度。例如，您可以透過將 div 的不透明度從 0 逐漸增加到 1 來使其淡入淡出。

以上是如何在 CSS 中使用「display: none」對 Div 進行動畫處理？的詳細內容。更多資訊請關注PHP中文網其他相關文章！