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以了解其余更改。

＆amp;关键帧动画无法在Firefox中运行

1 个答案: