我在我的项目中使用LESS,它是用于动画的混合
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
-webkit-animation: @name @duration @delay @ease;
-moz-animation: @name @duration @delay @ease;
-ms-animation: @name @duration @delay @ease;
animation: @name @duration @delay @ease;
}
它的关键帧动画
/* showCaseWyvLogo */
@-moz-keyframes showCaseWyvLogo {
0% {
-moz-transform: translate(0, -500px);
opacity: 0;
}
100% {
-moz-transform: translate(0, 0);
opacity: 1;
}
}
@-webkit-keyframes showCaseWyvLogo {
0% {
-webkit-transform: translate(0, -500px);
opacity: 0;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
@keyframes showCaseWyvLogo {
0% {
transform: translate(0, -500px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
然后我用它
.caseWyvLogo {
width: 123px;
height: 187px;
background: url('../img/logoWyv.png') 0 0;
position: absolute;
top: 145px;
left: 42%;
margin-left: -60px;
.animation (showCaseWyvLogo, 700ms, 0, ease-out);
}
它在Chrome,Opera和IE10中运行良好,但在FF(版本37.0.1)中不起作用。有没有办法让它在FF中运行?