CSS Transition from height auto to height 75%

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.

If my answer was not usefull, please provide more code, or better, JSFiddle example. — Itay Gal, Jan 15 '14 at 13:50

score 3 · Accepted Answer · answered Jan 15 '14 at 13:51

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}

Itay Gal · Answer 2 · 2014-01-15T13:48:46.790

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>

edited Jan 15 '14 at 13:48

answered Jan 15 '14 at 13:43

Itay Gal

10,706
6
36
75

@user2207770 Does this answer your question? If so, please accept the answer. – Itay Gal Jan 28 '14 at 08:29

score 1 · Answer 3 · answered Jan 15 '14 at 13:59

1

Simple, change from height to min-height or max-height, what ever will better for your needs.

Example:Fiddle

answered Jan 15 '14 at 13:59

Sven

252
1
8

CSS Transition from height auto to height 75%

3 Answers3