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中文网其他相关文章！
