＆關鍵幀動畫無法在Firefox中工作

Question

我被問到爲什麼這個動畫在chrome中工作，但沒有在firefox中，我對css3轉換沒有經驗，我更喜歡jQuery，但我被要求到它的底部所以... 這裏是CSS，我希望它很明顯是什麼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 */ 
} 

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。