CSS變換在Firefox上無法正常工作

Question

我有這個小小的動畫，但它在Firefox上不能正常工作，它在Explorer上根本無法正常工作。

這個想法是，當你將鼠標懸停在灰色的DIV上時，紅色的DIV會生成動畫。

在Firefox上，當您重新加載頁面並且光標懸停在灰色區域時，它只會運行一次。如果你想讓它再次運作，它不會動畫。在鉻上它工作正常。

哦，差點忘了，動畫基本是從animate.css

http://jsfiddle.net/soporo123/8PDnA/5/

的HTML：

<div id="box"> 
    <div id="button" class="bounceIn"></div> 
</div> 

的CSS：

#box { 
    width:400px; 
    height: 400px; 
    background-color:#999; 
} 
#button{ 
    width:40px; 
    height:40px; 
    background-color:#F00; 
} 

#box:hover #button{ 
    -webkit-animation-duration:1s; 
    -moz-animation-duration: 1s; 
    -ms-animation-duration:1s; 
    -o-animation-duration:1s; 
    animation-duration:1s; 
} 

@-webkit-keyframes bounceIn { 
    0% {-webkit-transform: scale(.3);} 
    50% {-webkit-transform: scale(1.05);} 
    70% {-webkit-transform: scale(.9);} 
    100% {-webkit-transform: scale(1);} 
} 

@-moz-keyframes bounceIn { 
    0% {-moz-transform: scale(.3);} 
    50% {-moz-transform: scale(1.05);} 
    70% {-moz-transform: scale(.9);} 
    100% {-moz-transform: scale(1);} 
} 

@-o-keyframes bounceIn { 
    0% {-o-transform: scale(.3);} 
    50% {-o-transform: scale(1.05);} 
    70% {-o-transform: scale(.9);} 
    100% {-o-transform: scale(1);} 
} 

@keyframes bounceIn { 
    0% {transform: scale(.3);} 
    50% {transform: scale(1.05);} 
    70% {transform: scale(.9);} 
    100% {transform: scale(1);} 
} 

.bounceIn { 
    -webkit-animation-name: bounceIn; 
    -moz-animation-name: bounceIn; 
    -o-animation-name: bounceIn; 
    animation-name: bounceIn; 
} 

在此先感謝！

Answer 1

moz，opera沒有特定的關鍵幀。 僅使用@ -webkit-keyframes，對動畫名稱的計數相同。 也做所有在你的懸停，也是動畫名稱。

CSS：

#box { 
    width:400px; 
    height: 400px; 
    background-color:#999; 
} 

#button{ 
    width:40px; 
    height:40px; 
    background-color:#F00; 
} 

#box:hover #button{ 
    -webkit-animation-duration:1s; 
    animation-duration:1s; 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
} 

@-webkit-keyframes bounceIn { 
    0% {-webkit-transform: scale(.3);} 
    50% {-webkit-transform: scale(1.05);} 
    70% {-webkit-transform: scale(.9);} 
    100% {-webkit-transform: scale(1);} 
} 

@keyframes bounceIn { 
    0% {-moz-transform: scale(.3); -o-transform: scale(.3); transform: scale(.3);} 
    50% {-moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05);} 
    70% {-moz-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9);} 
    100% {-moz-transform: scale(1); -o-transform: scale(1); transform: scale(1);} 
} 

這裏更新的提琴： http://jsfiddle.net/8PDnA/10/

我沒有檢查是否-o變換存在，但只是檢查它在W3C。