How to Animate a Div with Display: None Using Only CSS?

CSS Animation with Display: None Dilemma

When working with CSS animations, you may encounter situations where you want a div to slide in later while other elements fill its space initially. However, if you set the animated div to display: none, it continues to occupy space and prevents the other elements from flowing properly.

To resolve this issue, you need a way to ensure that the animated div doesn't take up space until its designated time to appear. While you could consider using jQuery, this article focuses on a purely CSS solution for smoother and controlled timing.

Hardcoding the Height

The key lies in hardcoding the height of the animated div. This way, it reserves the necessary space without rendering itself visible. You can then use CSS animations to alter its height at the appropriate moment.

For example, consider the following code:

#main-image {
    height: 0;
    overflow: hidden;
    transition: height 1s ease 3.5s;
}

Animation with Keyframes

Once the height is fixed, you can use keyframes to animate its change. Here's an example:

#main-image.fadeInDownBig {
    height: 300px;
}

In this example, the fadeInDownBig class is applied to the main-image div at the desired time, triggering the transition to its intended height.

Browser Support and Demo

This CSS-only solution works well in modern browsers. You can view a live demo at the following link:

• http://jsfiddle.net/duopixel/qD5XX/

By employing this technique, you can achieve smooth CSS animations without the pitfalls of display: none, ensuring that your divs flow seamlessly as intended.

The above is the detailed content of How to Animate a Div with Display: None Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!