CSS3 Animate.css在firefox上看起来很奇怪

我正在使用animate.css制作登录幻灯片的简单动画

这是触发因素：

$('body').on('click', '.actions .login', function(){
    $('#login').removeClass('bounceOutUp');
    $('.overlay').fadeIn(300);
    $('#login').addClass('bounceInDown');

});
$('body').on('click', '#login .close', function(){
    $('#login').removeClass('bounceInDown');
    $('#login').addClass('bounceOutUp');
});

以及基本的css标记：

.animated {
    -moz-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-transition: all 0.3s ease-in-out;
}

@-moz-keyframes bounceInDown {
0% {
  opacity: 0;
  -moz-transform: translateY(-2000px);
}
60% {
  opacity: 1;
  -moz-transform: translateY(30px);
}
80% {
  -moz-transform: translateY(-10px);
}
100% {
  -moz-transform: translateY(0);
}
}

@-moz-keyframes bounceOutUp {
0% {
 -moz-transform: translateY(0);
}
20% {
  opacity: 1;
  -moz-transform: translateY(20px);
}
100% {
  opacity: 0;
  -moz-transform: translateY(-2000px);
}
}

---

我真的不知道为什么会这样。标记与chrome完全相同，并且在那里滚动得很好。

与chrome不同，Firefox中的

transition

属性应用于

动画中的属性

删除
[-moz-]transition
属性，您的CSS3动画在Firefox和Chrome中都能正常工作

ps.您缺少
-moz框大小：边框框在某些元素中。
没问题，请从
中删除
（-moz-webkit）-transition
。覆盖表单[role=“widget”]
，如果动画仍然存在问题，请再次进行注释<代码>=]
谢谢，伙计，关于ff上的旅行的信息真的很好。我设法通过完全移除它来调整它。来自.animated的动画持续时间是一起触发的，而不是一起触发的。