Übergang: Top funktioniert nicht in Firefox und Opera

Question

Ich kann es einfach nicht funktionieren. Ich bin mir ziemlich sicher, dass es möglich sein muss.

Dies ist nur ein Beispiel. Ich möchte, dass sich das innere Teil mit Übergangseffekt nach unten bewegt.

<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> 

Es funktioniert gut z. in Chrome, aber nicht Firefox 14 und Opera 12 (mit dem jeweiligen -o-Übergang). Ich habe die einzige "Übergang" -Eigenschaft ohne Wirkung versucht.

Answer 1

Sie können nicht von auto zu 20px wechseln. Setzen Sie es explizit auf 0px in #inner {}.