How Can I Animate a Div with `display: none` in CSS?

CSS Animation and Display None

When attempting to animate a div using CSS, it is important to understand the limitations of the display property. While the display: none; property can hide an element from view, it does not remove it from the document flow. This can lead to issues when animating elements that take up space on the page.

To achieve the desired effect, you cannot switch the main div directly from display: none; to display: block;. Instead, you will need to set the height of the main div to 0 and use overflow: hidden; to hide it initially. Then, when it is time for the main div to slide in, you can animate the height of the div to the desired value.

Here's an example:

#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;
}

This will cause the main div to slide in after 3.5 seconds, pushing the other divs down the page as it enters the viewport.

Note that this technique also works with other attributes, such as opacity. For example, you could fade in a div by gradually increasing its opacity from 0 to 1.

The above is the detailed content of How Can I Animate a Div with `display: none` in CSS?. For more information, please follow other related articles on the PHP Chinese website!