Css 过渡：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>

#外
{
宽度：200px；
高度：200px；
背景颜色：黄色；
}
#内在的
{
位置：相对位置；
-webkit过渡：顶部。4s缓解；
-moz过渡：顶部。4s放松；
宽度：50px；
高度：100px；
背景色：红色；
}
#内部：悬停
{
顶部：20px；
}

---

它很好用。在Chrome中，但不是Firefox 14和Opera 12（分别带有-o-transition）。我尝试了唯一的“transition”属性，但没有效果。

您无法从

auto

转换到

20px

。在

#internal{}

中将其显式设置为

0px

记住

-o-

和未固定的转换版本。@Prinzhom，一个非常小的东西，但仍然是一个非常有价值的知识。