Mozilla 动画工具包不工作答案

【问题标题】：Mozilla Animation Kit not workingMozilla 动画工具包不工作
【发布时间】：2014-08-16 10:21:01
【问题描述】：

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

【问题讨论】：

发布您的 html 或者更好地制作 FIDDLE
嗨 Richa，很遗憾我不能发布 html，因为我们的设计是私有的
好吧，那样的话我们就很难帮上忙了
如果你将css和js应用到id为-> questions_menu_drawer的任何div，结果输出应该是动画
所以你的意思是我们应该写html然后试着帮助你。很棒

标签： css webkit transform mozilla

【解决方案1】：

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

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

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

【讨论】：

@gunj_desai 很高兴能帮上忙 :)