переход :top не работает в Firefox и Opera

Я просто не могу заставить это работать. Я почти уверен, что это должно быть возможно.

Это всего лишь пример. Я хочу, чтобы внутренний div перемещался вниз с эффектом перехода.

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

Он отлично работает, например. в Chrome, но не в Firefox 14 и Opera 12 (с соответствующим переходом -o -). Я попробовал единственное свойство «переход» безрезультатно.