[10 solved Answers] How to transit height: 0; to height: auto; using CSS

#child0 
{
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
#parent0:hover #child0 
{
    height: auto;
#child40 
{
    height: 40px;
    overflow: hidden;
    background-color: #dedede;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}
#parent40:hover #child40 
{
    height: auto;
}
h1 
{
    font-weight: bold;
}

<hr />
<div id="parent0">
    <h1>Hover me (height: 0)</h1>
    <div id="child0">Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br /></div></div>
<hr />
<div id="parent40">
    <h1>Hover me (height: 40)</h1>
    <div id="child40">Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />
    </div>
</div>

#menu #list 
{
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}
#menu:hover #list 
{
    max-height: 400px;
    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>

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

#toggled
{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}
#trigger:hover + #toggled
{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

wrap 
{ 
overflow:hidden; 
}
.inner 
{
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}
inner.open 
{ margin-top:0px; 
}

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

div.stretchy
{
    transition: 1s linear;
}
div.stretchy.hidden
{
    height: 1;
}
div.stretchy.visible
{
    height: auto;
    min-height:40px;
    max-height:400px;
}

.sidemenu li ul 
{
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul 
{
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}

div 
{
  position: absolute;
  width:100%;
  bottom:1px;
  left:0px;
 background:#111;
  color: #FFF;
  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.close 
{
  max-height:0%; /**/
}

div 
{
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated 
{
    height: auto;
    padding: 24px 18px;
}

.our_content 
{
	/* Initially we don't want any height, and we want the contents to be hidden */
	max-height: 0;
	overflow: hidden;

	/* Set our transitions up. */
	-webkit-transition: max-height 0.8s;
	-moz-transition: max-height 0.8s;
	transition: max-height 0.8s;
}
.outside_box:hover .our_content 
{
	/* On hover, set the max-height to something large. In this case there's an obvious limit. */
	max-height: 200px;
}

$(function () 
{
    $(".paragraph").click(function () 
{
        var expanded = $(this).is(".expanded");
        if (expanded) 
{
            $(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
 } 
        else 
{
            $(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () 
{ $(this).addClass("expanded"); });
 }
    });
});

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});