Css Mozilla动画工具包不工作

我正在尝试设置一个元素的动画，并使其在单击按钮时显示。 下面的代码在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');
});

---

示例-

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

检查我测试过的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);
    }
}

---

发布你的html，或者更好地制作一个提琴嘿，Richa，不幸的是我不能发布html，因为我们的设计是私密的，在这种情况下，如果你将css和js应用到id->questions\u menu\u drawer的任何div，我们将很难帮到你，结果输出应该是动画，所以你的意思是我们应该编写html，然后尝试帮助你。Great@gunj_desai很高兴能帮忙：）