CODEWITHSUNDEEP
cssinternet-explorerfirefoxjquery-animatecss-transforms
user3202909
user3202909

Reputation: 33

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

Upvotes: 0

Views: 3836

Answers (1)

Leo Pflug
Leo Pflug

Reputation: 544

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.

Upvotes: 1

Related Questions