关键帧动画在Firefox中不起作用

时间:2015-04-13 16:02:54

标签: css less

我在我的项目中使用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中运行?

0 个答案:

没有答案