CSS Переход с высоты авто в высоту 75%

Question

Я сделал переход css, который от высоты автоматически до высоты: 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; 

Но он не работает в IE и Firefox. Я нашел несколько сообщений в Google, но не смог найти решение.

Спасибо, четыре вашей помощи.

Answer 1

Для работы с % и auto вы можете попробовать с min-height, как это:

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%; 
} 

Проверить это Demo Fiddle

_{Испытано в Chrome 31 - Firefox 26}

Answer 2

Попробуйте это: 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> 

Answer 3

Простой, изменение с высоты до минимальной высоты или макс высоты, что когда-нибудь будет лучше для ваших потребностей.

Пример: Fiddle