Mozilla Animation Kit not working

时间秒杀一切 提交于 2019-12-12 02:57:24

问题


I am trying to animate an element and make it appear on button click. The below code works perfectly fine in Chrome, but doesn't work for Mozilla Firefox. Any help is greatly appreciated.

Thanks

CSS Class for animation:

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

My JS code on button click:

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

Example - http://jsfiddle.net/88ogrojy/


回答1:


You need to add following to your code.

Check this 2 fiddles i tested

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


来源:https://stackoverflow.com/questions/25339204/mozilla-animation-kit-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!