3

我被要求弄清楚为什么这个动画在 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 */
}
4

1 回答 1

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 */
}

This seems to work. I have checked it in Firefox and Chrome. I also update other selectors to incorporate what I have done above. Please check this fiddle for the rest of the changes.

于 2013-03-21T14:21:18.450 回答