CSS3菜单fadeOut在firefox中不起作用

Question

我正在尝试使用简单的淡入淡出效果创建菜单。它在chrome中运行良好，当我离开鼠标并快速向下移动鼠标时，下拉状态仍然是动画的原因。但是：在Firefox中，动画menuHoverFadeOut根本不起作用。所以在firefox中动画毫无意义。我使用以下CSS代码：

#cssmenu li > ul
{
  background: #005588;
  border: 1px solid #004477;
  position: absolute;
  width: auto;
  z-index: 5000;
  opacity:0;
  animation: menuHoverFadeOut 0.5s ease-in-out;
  -webkit-animation: menuHoverFadeOut 0.5s ease-in-out; /* Safari and Chrome */
  animation-transition-property: opacity;
  top:-9999px;
}

#cssmenu li:hover > ul
{
  opacity:1;
  animation: menuHoverFadeIn 0.5s linear;
  -webkit-animation: menuHoverFadeIn 0.5s linear;
  top:auto;
}

@keyframes menuHoverFadeIn
{
    from {opacity:0;}to {opacity:1;}
}

@-webkit-keyframes menuHoverFadeIn
{
    from {opacity:0;}to {opacity:1;}
}

@keyframes menuHoverFadeOut {
    0%   {opacity:1;top:initial;}
    50%   {opacity:1;top:initial;}
    100% {opacity:0;top:-9999;}
}

@-webkit-keyframes menuHoverFadeOut
{
    0%   {opacity:1;top:initial;}
    50%   {opacity:1;top:initial;}
    100% {opacity:0;top:-9999;}
}

使用以下HTML结构：

<div id='cssmenu'>
  <ul id='main'>
   <li>Home
     <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
     </ul>
   </li>
   <li>About
     <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
     </ul>
   </li>
    </ul>
</div>

我喜欢看它在chrome中的工作方式，我也尝试过它，但它在它中没有正常工作。

http://jsfiddle.net/jgaFL/1/

Answer 1

为Firefox（和Opera）提供浏览器特定的前缀：

@-webkit-keyframes menuHoverFadeOut {
    /* ... */
}
@-moz-keyframes menuHoverFadeOut {
    /* ... */
}
@-o-keyframes menuHoverFadeOut {
    /* ... */
}
@keyframes menuHoverFadeOut {
    /* ... */
}

/* (...) */

#cssmenu li > ul {
    -webkit-animation: menuHoverFadeOut 0.5s ease-in-out;
    -moz-animation: menuHoverFadeOut 0.5s ease-in-out;
    -o-animation: menuHoverFadeOut 0.5s ease-in-out;
    animation: menuHoverFadeOut 0.5s ease-in-out;
    /* ... and so on */
}

---

的反正，

我不明白为什么要打扰animation。在尝试实现您想要实现的效果之后，我认为使用transition更加简单：

-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-ms-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;