代码之家 › 专栏 › 技术社区 › gunj_desai

Mozilla动画工具包不工作

mozilla transform webkit css

gunj_desai · 技术社区 · 12 年前

我正在尝试设置一个元素的动画,并使其在单击按钮时显示。下面的代码在Chrome中运行得很好,但在Mozilla Firefox中不起作用。非常感谢您的帮助。

谢谢

用于动画的CSS类:

.moz-trial{
    -moz-animation:moz-trial 2s;
    -webkit-animation: moz-trial 1s;
}

@-webkit-keyframes moz-trial {

    0%   {
        opacity: 0;
        -moz-transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
    }
    50%   {
        opacity: 0.8;
       -moz-transform: translateX(+20px);
       -webkit-transform: translateX(+20px);
    }
    100%   {
        opacity: 1;
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }
}

单击按钮时我的JS代码:

$('#open_drawer').on('click',function(){    
   $('#questions_menu_drawer').removeClass('hidden').addClass('moz-trial');
});

示例- http://jsfiddle.net/88ogrojy/

1 回复 | 直到 9 年前

Richa 12 年前

您需要在代码中添加以下内容。

检查我测试的这两个小提琴

FIDDLE 1 FIDDLE 2

@keyframes moz-trial {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    50% {
        opacity: 0.8;
        -moz-transform: translateX(+20px);
        transform: translateX(+20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0px);
        transform: translateX(0px);
    }
}

推荐文章