transition: top no funciona en Firefox y Opera

Question

No puedo hacer que esto funcione. Estoy bastante seguro de que debe ser posible.

Esto es solo un ejemplo. Quiero que el div interno se mueva hacia abajo con efecto de transición.

<div id="outer"> 
    <div id="inner"></div> 
</div> 

<style type="text/css">  
    #outer 
    { 
     width:200px; 
     height:200px; 
     background-color:Yellow; 
    } 

    #inner 
    { 
     position:relative; 
     -webkit-transition: top .4s ease-out; 
     -moz-transition: top .4s ease-out; 
     width:50px; 
     height: 100px; 
     background-color:Red; 
    } 

    #inner:hover 
    { 
     top:20px; 
    } 

</style> 

Funciona bien f.ex. en Chrome, pero no en Firefox 14 y Opera 12 (con la respectiva -o-transition). Probé la única propiedad de "transición" sin efecto.

Answer 1

No puede pasar de auto a 20px. Establézcalo explícitamente en 0px en #inner {}.