Max-Height Transition vs. Height Transition

by crnacura

HTML

<div class="maxheight">
Max-height "transition"<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
</div>

<div class="height">
Real transition<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
</div>

CSS

div {    
    color: #fff; 
    overflow: hidden; 
    width: 40%;   
    float: left;    
}

div.maxheight {
    background: orange;
    max-height: 1.2em;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

div.maxheight:hover {
    max-height: 999px;
}

div.height {
    background: blue;
    height: 1.2em;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

div.height:hover {
    height: 100px;
}