CSS3過渡W /火狐/ IE

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> 

過渡做工精細谷歌瀏覽器，但不能在Firefox也不I.E.我對所有這些CSS3動畫都很陌生，所以也許我需要了解一些基礎知識。我對

<li></li> 

其他動畫，使我的HTML菜單「碼頭」，他們很好地工作在所有瀏覽器，但沒有「底」一個在「dockWrapper」。

謝謝 西蒙

Answer 1

將bottom: 0增加到div#dockWrapper{。你需要一個地方過渡。

根據http://caniuse.com/#feat=css-transitions，只有IE10 +支持transition屬性。

Answer 2

對於非火狐/ Chrome瀏覽器，我加-o-transition，這將讓較舊版本的歌劇院工作，transition，這將讓IE10工作。 IE9不支持轉換。

但是，Firefox需要明確聲明X和Y起始位置。試試這個：

#dockWrapper{ 
    width: auto; 
    display: inline-block; 
    position: relative; 
    left:0; 
    bottom:0; 
    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; 
    -o-transition: bottom 0.5s; 
    transition: bottom 0.5s; 
} 

我有同樣的問題之前，動畫菜單項，將明確的X/Y聲明解決了這個問題。希望它也適合你。

注意，我在#dockWrapper之前刪除了div限定符。只要您的HTML有效，您就不會有多個ID聲明，因此無需限定該ID。它只是讓CSS變得更慢而沒有任何好處。