CSS Transform not working properly on Firefox - css

Question

I have this little animation but it does not behave properly on Firefox and it does not work at all on Explorer.
The idea is that when you hover on the gray DIV, the red DIV will animate.
On Firefox it runs only once when you reload the page and the cursor is hover on the gray area. If you want to make it work again it'll not animate. On chrome it works fine.
Oh, before I forget, the animation basics is from animate.css
http://jsfiddle.net/soporo123/8PDnA/5/
The HTML:
<div id="box">
<div id="button" class="bounceIn"></div>
</div>
The 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;
}
Thanks in advance!!

Answer 1

There are no specific keyframes for moz, opera.
only use #-webkit-keyframes, same counts for animation-name.
Also do all in your hover, also the animation name.
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);}
}
here your updated fiddle:
http://jsfiddle.net/8PDnA/10/
I didn't check if -o-transform exists, but just check it at w3c.