3

なぜこのアニメーションが chrome では機能するのに Firefox では機能しないのかを解明するように求められました。css3 トランジションの経験はほとんどありません。 htmlが何であるかが明らかであることを願っています.htmlはクロムで動作するので問題ないと確信しているので、構文エラーまたは同様のものであると確信しています.

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

これはうまくいくようです。FirefoxとChromeで確認しました。上記で行ったことを組み込むために、他のセレクターも更新します。残りの変更については、このフィドルを確認してください。

于 2013-03-21T14:21:18.450 に答える