CSS適用於Chrome，但不適用於Firefox

Question

我嘗試了很多事情，但是沒有任何效果，如果它不是一個transform / translateX事情，則idk。 我嘗試了淡入淡出，但效果很好，但是彈跳了，translateX無法正常工作。 我目前正在使用brickts軟件，並且還嘗試了崇高測試2。請幫助。 謝謝。

/*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

您需要無前綴的屬性。

因此，例如：

.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

謝謝您的幫助。 我找到了答案。 我的html代碼出錯了： style='display:inline ，它可以在chrome上使用，但是對於Firefox和Safari，您應該使用以下代碼： style='display:inline-block 。 再次感謝。

Answer 3

首先，檢查您的語法。 我注意到有一些“損壞的”屬性，寫為“ -moz-transform”。 應該是一個字。 其次，您可以提供一些HTML還是jsfiddle？

（我無法將其發布為評論-沒有足夠的聲譽來做到這一點。）