CSS Transform not working properly on Firefox

问题

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!!

回答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.

来源：https://stackoverflow.com/questions/21164803/css-transform-not-working-properly-on-firefox

标签

css

internet-explorer

firefox

jquery-animate

css-transforms