关键帧动画在 Firefox 中不起作用

Question

我被要求弄清楚为什么这个动画在 chrome 中有效，但在 Firefox 中无效，我对 css3 过渡几乎没有经验，我更喜欢 jQuery，但我被要求深入了解它，所以...... 这是css，我希望它的html是显而易见的，我确定html很好，因为它可以在chrome中工作，所以我确定它是语法错误或类似的。

编辑 - 请参阅http://jsfiddle.net/5Uq86/

/* the animation */
@keyframes sub-menu-anim                                        {   to {height: 65px;}  }
@-moz-keyframes sub-menu-anim       /* Firefox */               {   to {height: 65px;}  }
@-webkit-keyframes sub-menu-anim    /* Safari and Chrome */     {   to {height: 65px;}  }
@-o-keyframes sub-menu-anim         /* Opera */                 {   to {height: 65px;}  }

/* products menu animation */
@keyframes sub-menu-anim-prod                                       {   to {height: 210px;} }
@-moz-keyframes sub-menu-anim-prod      /* Firefox */               {   to {height: 210px;} }
@-webkit-keyframes sub-menu-anim-prod   /* Safari and Chrome */     {   to {height: 210px;} }
@-o-keyframes sub-menu-anim-prod        /* Opera */                 {   to {height: 210px;} }

/* health menu animation */
@keyframes sub-menu-anim-health                                     {   to {height: 294px;} }
@-moz-keyframes sub-menu-anim-health    /* Firefox */               {   to {height: 294px;} }
@-webkit-keyframes sub-menu-anim-health /* Safari and Chrome */     {   to {height: 294px;} }
@-o-keyframes sub-menu-anim-health      /* Opera */                 {   to {height: 294px;} }

/* applying the animation to the menu */
#primaryNav li.menu-item ul.sub-menu {
    animation:sub-menu-anim 0.5s;
    -moz-animation: sub-menu-anim 0.5s; /* Firefox */
    -webkit-animation: sub-menu-anim 0.5s; /* Safari and Chrome */
    -o-animation: sub-menu-anim 0.5s; /* Opera */
}

#primaryNav li.menu-item ul.sub-menu ul.sub-menu {
    animation:none;
    -moz-animation:none; /* Firefox */
    -webkit-animation:none !important; /* Safari and Chrome */
    -o-animation:none; /* Opera */
}

#primaryNav li#menu-item-17 ul.sub-menu {
    animation:sub-menu-anim-prod 0.5s;
    -moz-animation: sub-menu-anim-prod 0.5s; /* Firefox */
    -webkit-animation: sub-menu-anim-prod 0.5s; /* Safari and Chrome */
    -o-animation: sub-menu-anim-prod 0.5s; /* Opera */
}

#primaryNav li#menu-item-229 ul.sub-menu {
    animation:sub-menu-anim-health 0.5s;
    -moz-animation: sub-menu-anim-health 0.5s; /* Firefox */
    -webkit-animation: sub-menu-anim-health 0.5s; /* Safari and Chrome */
    -o-animation: sub-menu-anim-health 0.5s; /* Opera */
}

Answer 1

问题似乎出在您调用动画的位置。我更改了您的 CSS 选择器以在悬停时执行此操作（以便每次悬停时都会发生动画）并对 -moz-animation 属性进行调整以包含更多值：

#primaryNav li#menu-item-17:hover > ul.sub-menu {
    animation:sub-menu-anim-prod 0.5s;
    -moz-animation: 0.5s ease 0s normal none 1 sub-menu-anim-prod;
    -webkit-animation: sub-menu-anim-prod 0.5s; /* Safari and Chrome */
    -o-animation: sub-menu-anim-prod 0.5s; /* Opera */
}

这似乎有效。我已经在 Firefox 和 Chrome 中检查过了。我还更新了其他选择器以合并我上面所做的。其余更改请查看this fiddle。