How to Transition Height: 0; to Height: Auto; Using Css

How can I transition height: 0; to height: auto; using CSS?

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {    max-height: 0;    transition: max-height 0.15s ease-out;    overflow: hidden;    background: #d5d5d5;}
#menu:hover #list {    max-height: 500px;    transition: max-height 0.25s ease-in;}

<div id="menu">    <a>hover me</a>    <ul id="list">        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->        <li>item</li>        <li>item</li>        <li>item</li>        <li>item</li>        <li>item</li>    </ul></div>

CSS height animation on element with dynamic height

Remove the height: 200px;, so you have both animate for expand and collapse.

Also, use the following to add animate on new line:

@keyframes lineInserted {
  from {
    height: 0;
  }
  to {
    height: 20px; /* your line height here */
  }
}
div[contenteditable] > div {
  animation-duration: 0.3s;
  animation-name: lineInserted;
  transition: height 0.3s;
}

document.querySelector('#button').addEventListener('click', function() {  document.querySelector('.text').classList.toggle('max');});

.text {  background: green;  color: #fff;  transition: all .3s ease-in-out;  min-height: 20px;  max-height: 200px;  overflow: auto;}
.max {  transition: all .3s ease-in-out;  min-height: 200px;}
@keyframes lineInserted {  from {    height: 0;  }  to {    height: 20px; /* your line height here */  }}div[contenteditable] > div {  animation-duration: 0.3s;  animation-name: lineInserted;  transition: height 0.3s;}

<div class="text" contentEditable="true"></div><button id="button">Click</button>

CSS3 transition to height auto goes to height 0 first

I don't think you can transition to height: auto; with css transitions. A workaround, which isn't perfect is to transition max-height instead and set it to something greater then it will ever get. Depending on what value you set it to will have a effect on the transition speed, but I've set it to max-height: 1000px; for the sake of simplicity.

Here's a demo to show you what I mean.

Code from demo:

.foo
{
    max-height:100px;
    overflow:hidden;
    -webkit-transition: max-height 200ms;
    -moz-transition: max-height 200ms;
    -o-transition: max-height 200ms;
    transition: max-height 200ms;
}

.foo.open
{
    max-height:1000px;
}

It's not an elegant solution, but I hope it helps.

No CSS transition for 'height: fit-content'

As Mishel stated another solution is to use max-height. Here is a working example of that solution.

The key is to approximate your max-height when it is fully expanded, then the transitions will be smooth.

Hope this helps.

https://www.w3schools.com/css/css3_transitions.asp

document.querySelector('button')  .addEventListener(    'click',    () => document.querySelectorAll('div')      .forEach(div => div.classList.toggle('closed')));

div {  background-color: lightblue;  border: 1px solid black;  overflow-y: hidden; max-height: 75px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(1, 1, 1, 1);}div.closed {   max-height: 0;}

<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1><div class="div1">some text<br />even more text<br />so much text</div>
<br>
<h1>'height: fit-content' => 'height: 0'</h1><div class="div2">some text<br />even more text<br />so much text</div>

CSS transition auto height not working

One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...

Here's a DEMO

You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.

Hope this helps!

.ac-container{    width: 400px;    margin: 10px auto 30px auto;    text-align: left;}.ac-container label{    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;    padding: 5px 20px;    position: relative;    z-index: 20;    display: block;    height: 30px;    cursor: pointer;    color: #777;    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);    line-height: 33px;    font-size: 19px;    background: #ffffff;    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );    box-shadow:         0px 0px 0px 1px rgba(155,155,155,0.3),         1px 0px 0px 0px rgba(255,255,255,0.9) inset,         0px 2px 2px rgba(0,0,0,0.1);}.ac-container label:hover{    background: #fff;}.ac-container input:checked + label,.ac-container input:checked + label:hover{    background: #c6e1ec;    color: #3d7489;    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);    box-shadow:         0px 0px 0px 1px rgba(155,155,155,0.3),         0px 2px 2px rgba(0,0,0,0.1);}
.ac-container input{    display: none;}.ac-container section{    background: rgba(255, 255, 255, 0.5);    margin-top: -1px;    overflow: hidden;    max-height: 0px;    position: relative;    z-index: 10;    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;}.ac-container section p{    font-style: italic;    color: #777;    line-height: 23px;    font-size: 14px;    padding: 20px;    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}.ac-container input:checked ~ section{    -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}.ac-container input:checked ~ section.ac-small{    max-height: 500px; /*auto*/}

<div class="ac-container">    <div>                <input id="ac-1" name="accordion-1" type="checkbox" />        <section class="ac-small">            <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content...  </p>        </section>        <label for="ac-1">About us</label>            </div>    
<div>            <input id="ac-2" name="accordion-2" type="checkbox" />        <section class="ac-small">            <p>Some content... </p>        </section>        <label for="ac-2">About us</label></div></div>

CSS transition on height auto only working when adding class, not when removing class

It's the height, you are adding transition on max-height but your height changes to 0 instantly when you remove expanded class.

You can set height: auto; on the .information class with transition only on max-height.

.information{
  height: auto;
  max-height: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
  background: #434C69;
  transition: max-height 700ms ease-in-out;


  &.expanded{
    max-height: 500px;
    border-bottom: 1px solid $secondary-blue;
  }
 }