transition: top not working in Firefox and Opera

Question

I just cannot get this to work. I am pretty sure it must be possible.

This is just an example. I want the inner div to move down with transition effect.

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

It works fine f.ex. in Chrome, but not Firefox 14 and Opera 12 (with the respective -o-transition). I tried the sole "transition" property without effect.

Answer 1

You can't transition from auto to 20px. Set it explicitly to 0px in #inner {}.