How to make transition height from 0 to auto using CSS ?

Last Updated : 08 May, 2023

In this article, we are going to discuss how we can perform the transition from “height: 0;” to “height: auto;” using CSS.

The problem with directly transitioning to height: auto is that there is no transition, and it changes promptly. Instead, we need a transition in which the element or a container will change its height.

Syntax:

transition: [property] [duration] [timing-function] [delay];

Approach: Replace the height with max height so that the height of the container does not overcome the actual size of the container or box and it actually works as auto. Secondly, we set the after-transition to “auto” instead we have to set it to a value that the container or box will never attain.

CSS Properties used:

max-height: This property is used to set the maximum height of an element. This keeps the height property value from rising above the max-height.
transitions: This property is used to implement a change slowly and smoothly. We can also set the duration by which the change will occur slowly.

Example 1: The above approach is demonstrated by the below-given code where we can see how we can toggle the visibility of the list with a transition:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            color: green;
        }
 
        #menu #list {
            max-height: 0;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: #d5d5d5;
        }
 
        #menu:hover #list {
            max-height: 500px;
            transition: max-height 0.50s ease-in;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        How to transition height: 0;
        to height: auto; using CSS?
    </h3>
    <div id="menu">
        <a>Hover to increase the height.</a>
        <ul id="list">
            <li>DSA</li>
            <li>Algorithms</li>
            <li>Competitive Programming</li>
            <li>Web Technologies</li>
            <li>Interview Preparation</li>
        </ul>
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we can see how we use the same technique to multiple containers at the same time and we can see how the boxes shift the content below up to the space which is taken by the content in the container.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            color: green;
        }
 
        .wrapper #first {
            max-height: 0px;
            width: 15rem;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: slateblue;
            text-align: center;
        }
 
        .wrapper:hover #first {
            max-height: 500px;
            transition: max-height 0.50s ease-in;
        }
 
        .wrapper #second {
            max-height: 0px;
            width: 15rem;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: pink;
            text-align: center;
        }
 
        .wrapper:hover #second {
            max-height: 600px;
            transition: max-height 0.50s ease-in;
        }
 
        .wrapper #third {
            max-height: 0px;
            width: 15rem;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: grey;
            text-align: center;
        }
 
        .wrapper:hover #third {
            max-height: 700px;
            transition: max-height 0.50s ease-in;
        }
 
        .wrapper #fourth {
            max-height: 0px;
            width: 15rem;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: burlywood;
            text-align: center;
        }
 
        .wrapper:hover #fourth {
            max-height: 800px;
            transition: max-height 0.50s ease-in;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        How to transition height: 0; to
        height: auto; using CSS?
    </h3>
    <div class="wrapper">
        <a>Hover to Reveal the first box.</a>
        <div id="first">
            Hello Geek!!
            <br>
            This is the first Container
            <br>
            This is the first box content.
        </div>
    </div>
    <div class="wrapper">
        <a>Hover to Reveal the Second box.</a>
        <div id="second">
            Hello Geek!!
            <br>
            This is the Second Container
            <br>
            This is the Second box content.
        </div>
    </div>
    <div class="wrapper">
        <a>Hover to Reveal the Third box.</a>
        <div id="third">
            Hello Geek!!
            <br>
            This is the Third Container
            <br>
            This is the Third box content.
        </div>
    </div>
    <div class="wrapper">
        <a>Hover to Reveal the Fourth box.</a>
        <div id="fourth">
            Hello Geek!!
            <br>
            This is the Fourth Container
            <br>
            This is the Fourth box content.
        </div>
    </div>
</body>
</html>

Output:

Suggest improvement

How to create Candle Animation using CSS ?

React Suite DateRangePicker One tap

Share your thoughts in the comments

How to make transition height from 0 to auto using CSS ?

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?