CSS Transition from height auto to height 75% [duplicate]

Question

I made a css transition which is from height auto to height: 75%.

CSS-Transition:

-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;

But its not working in IE and Firefox. I found some posts on google, but couldnt find a solution.

Thanks four your help.

Answer 1

To work with % and auto you can try with min-height like this:

div {
  -webkit-transition: height 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
div:hover {
  min-height:75%;
} 

Check this Demo Fiddle

_{Tested in Chrome 31 -- Firefox 26}

Answer 2

Try this: transition example

CSS:

.tran{
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
    height: 100px;
    background: #e5e5e5;
    height: 100%;
}

.tran:hover{
    height: 300px;
}

HTML:

<div style="height: 200px;">
    <div class="tran">
        Example
    </div>
</div>