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中文網其他相關文章！
