Question

我尝试了很多东西，但没有任何工作，如果它是一个转换/ translateX的话，那就是idk。我试过褪色它有效，但弹跳和translateX无法正常工作。我目前正在使用brakets软件，我也尝试过sublime test 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吗？

（我不能将其作为评论发布 - 没有足够的声誉来做到这一点。）

CSS适用于Chrome但不支持Firefox

3 个答案: