html - 带 Firefox/IE 的 CSS3 过渡

Question

我有这个 CSS:

div#dockWrapper{
    width: auto;
    display: inline-block;
    position: relative;
    border-bottom: solid 2px rgba(255, 255, 255, .35);
    line-height: 0; 
    transition: bottom 0.5s;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
}

div#dockWrapper:hover{
    bottom: 77px;
}

还有这个 HTML

<div id="dockContainer">
    <div id="dockWrapper">
        <div class="cap left">                  
        </div>
        <ul class="osx-dock">
            <li>
            </li>
        </ul>   
    </div>
</div>

过渡在 google chrome 中工作正常，但在 Firefox 和 I.E.我是所有这些 CSS3 动画的新手，所以也许我需要了解一些基础知识。我还有其他动画在

<li></li>

它为我的 HTML 菜单创建了一个“停靠栏”，它们在所有浏览器上都可以正常工作，但在“dockWrapper”上的“底部”浏览器却不行。

谢谢， 西蒙

Answer 1

将 bottom: 0 添加到 div#dockWrapper{。您需要一个过渡的地方。

根据 http://caniuse.com/#feat=css-transitions , 只有 IE10+ 支持 transition 属性。