css - Mozilla 动画工具包不工作

Question

我正在尝试为元素设置动画并使其在单击按钮时出现。 以下代码在 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/

Answer 1

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

检查我测试过的这 2 个 fiddle

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);
    }
}