CSS适用于Chrome，但不适用于Firefox

Question

I tried a lot of things but nothing is working, idk if its a transform/translateX thing or not. I tried fading and it worked, but bouncing and the translateX is not working. I am currently using brakets software and I also tried sublime test 2. Please help. Thanks.

/*animations*/

/******************
* Bounce in right *
*******************/


.animated { 
-webkit-animation-duration: 1s; 
-moz-animation-duration: 1s; 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
} 
.slow{
 -webkit-animation-duration: 2s; 
-moz-animation-duration: 2s; 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
}
.slower{
 -webkit-animation-duration: 3s; 
-moz-animation-duration: 3s; 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
}
.slowest{
 -webkit-animation-duration: 4s; 
-moz-animation-duration: 4s; 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
}

.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
opacity:0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px); 
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
opacity:0;
-webkit-transform: translateX(400px); 
-moz-transform: translateX(400px); 
}

.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight,
 .rotateInDownLeft, .rotateDownUpRight, .rollIn{
opacity:0;
}

.lightSpeedInRight, .lightSpeedInLeft{
opacity:0;
-webkit-transform: translateX(400px); 
-moz-transform: translateX(400px); 
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn { 
0% { 
    opacity: 0; 
    -webkit-transform: scale(.3); 
} 

50% { 
    opacity: 1; 
    -webkit-transform: scale(1.05); 
} 

70% { 
    -webkit-transform: scale(.9); 
} 

100% { 
     -webkit-transform: scale(1); 
} 
} 

@-moz-keyframes bounceIn { 
0% { 
    opacity: 0; 
    -moz-transform: scale(.3); 
} 

50% { 
    opacity: 1; 
    -moz-transform: scale(1.05); 
} 

70% { 
-moz-    transform: scale(.9); 
} 

100% { 
    -moz-transform: scale(1); 
} 
} 

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

/****************
* bounceInRight *
****************/

@-webkit-keyframes bounceInRight { 
0% { 
    opacity: 0; 

    -webkit-transform: translateX(100px); 
} 
30%{
    -webkit-transform: translateX(100px)
}
60% { 

    -webkit-transform: translateX(-10px); 
} 
80% { 
    -webkit-transform: translateX(5px); 
} 
100% {
opacity: 1;

    -webkit-transform: translateX(0); 
} 
} 

@-moz-keyframes bounceInRight { 
0% { 
    opacity: 1; 

 -moz-   transform: translateX(100px); 
} 
30%{
-moz-    transform: translateX(100px)
}

60% { 

    -moz-transform: translateX(-10px); 
} 
80% { 
    -moz-transform: translateX(5px); 
} 
100% {
opacity: 1;

    -moz-transform: translateX(0); 
} 
} 


.bounceInRight.go { 
-webkit-animation-name: bounceInRight; 
-moz-animation-name: bounceInRight; 
}

Answer 1

You need the unprefixed properties.

So for example:

.animated { 
-webkit-animation-duration: 1s; 
-moz-animation-duration: 1s; 
animation-duration: 1s; // unprefixed
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
animation-duration: 1s; // unprefixed
} 

Answer 2

Thank you for your help. I have found the answer. My html code had something wrong which was: style='display:inline , it works on chrome but for Firefox and Safari you should use this: style='display:inline-block . Thanks again.

Answer 3

At first, check your syntax. I have noticed that there are some "broken" properties, written '-moz- transform'. It should be one word. Second, could you provide some HTML or a jsfiddle?

(I could not post it as a comment - not enough reputation to do that.)