Firefox中閃爍的動畫

Question

我在做一個僅使用CSS的滑動登錄框。我面對的問題是，在FireFox中（我使用的是Firefox 16.0），滑出動畫會閃爍。它在Chrome和Safari中工作正常（IE中沒有動畫，但不閃爍，登錄框顯示正常）。 這裏是HTML：

<div id="slideout"> 
     <div id="slideout_inner"> 
      <form id="loginForm" action="#" method="POST"> 
       <table cellspacing="0"> 
        <tbody> 
         <tr> 
          <td><label for="lUsername">Username</label></td> 
          <td><label for="lPassword">Password</label></td> 
         </tr> 
         <tr> 
          <td><input type="text" name="username" id="lUsername" class="required" /></td> 
          <td><input type="password" name="password" id="lPassword" class="required" /></td> 
          <td><input type="submit" value="Login" /></td> 
         </tr> 
         <tr> 
          <td><span class="error"></span></td> 
          <td><span class="error"></span></td> 
         </tr> 

        </tbody> 
       </table> 
      </form> 
     </div> 
     <label>Login</label> 

這裏是CSS

#slideout { 
    position: fixed; 
    top: 0px; 
    left: 0; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
#slideout_inner { 
    position: fixed; 
    top: -250px; 
    left: 0px; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
#slideout:hover{ 
    top: 250px; 
} 
#slideout:hover #slideout_inner{ 
    top: 0; 
} 

這是問題 的JSFiddle如何解決Firefox中的閃爍？謝謝

Answer 1

這JSFiddle也許能夠幫助你。

這樣寫：

#slideout { 
    position: fixed; 
    top: 0; 
    left: 0; 
} 
#slideout_inner{ 
    height:0; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    overflow:hidden; 
} 
#slideout:hover #slideout_inner{ 
    height:200px; 
    border:1px solid red; 
} 

OR

這JSFiddle。