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

Question

我被要求弄清楚为什么这个动画在 chrome 而不是在 firefox 中工作，我对 css3 转换没有什么经验，我更喜欢 jQuery 但我被要求深入了解它所以......这是 css，我希望它很明显 html 是什么，我确定 html 很好，因为它在 chrome 中工作，所以我确定它是语法错误或类似错误。

edit - please see 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对于其余的更改。