Question

这很好，几乎所有的css3功能在firefox上运行都很棒，现在我发现这个动画并不能在firefox上运行？在铬或野生动物园工作很棒？有人解释我为什么？ TY。

ul.curent_buser{
    background:#fff !important; 
    position: absolute;
    top: 100%;
    left: 0;
    background: transparent;
    border-top: 1px solid #eaeaea;
    list-style: none;
    margin-top: 15px;
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 7px;
    -webkit-animation: trans 0.3s;
       -moz-animation: trans 0.3s;
        -ms-animation: trans 0.3s;
         -o-animation: trans 0.3s;
            animation: trans 0.3s;
    }

@keyframes trans {from {margin-top: 15px;} to {margin-top: 25px;}}
@-moz-keyframes trans { from {margin-top: 15px;} to {margin-top: 25px;}}
@-webkit-keyframes trans {from {margin-top: 15px;} to {margin-top: 25px;}}

FIDDLE

Answer 1

除了你提到的问题之外，我会说你有一些问题。

在你的小提琴中的html中，你<a class="arrUp"></a>内有<ul>。可以在<ul>内的唯一子元素类型是<li>。改变这个搞砸箭头看，但我相信你可以搞清楚。我只是将图像作为<ul>的背景，就像你对父<li>所做的一样。
转换对于您的下拉菜单比动画更好用。这样，您可以让动画同时关闭和打开。在您当前的代码中，即使动画确实有效，当您关闭下拉菜单时，您还是必须创建另一个动画或者让它消失。
问题的根源是Firefox在更改display类型之前没有运行动画。如果您没有更改display类型，则动画将起作用。

以下是有关过渡的更改。

假设您将拥有多个项目，因此我将所有项目更改为隐藏而非隐藏。

#main > li > ul {
    visibility: hidden;     
}

将动画更改为转换并更新边距以获得初始值。

ul.curent_buser {
    background:#fff !important;
    position: absolute;
    top: 100%;
    left: 0;
    background: transparent;
    border-top: 1px solid #eaeaea;
    list-style: none;
    margin-top: -10px; /* set to initial position */
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 7px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

我删除了所有动画并更改了焦点以更新边距和可见性。

#main li:focus ul {
    margin-top:25px;
    visibility: visible;
}

关键帧不能在firefox上运行的动画

1 个答案:

jsFiddle