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

Question

我正在使用 animate.css 为登录幻灯片制作一个简单的跳出动画。

http://www.freelancing.com.br/

这是触发器：

$('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 相同，在那里滚动得很好。

Answer 1

与 Chrome 不同，transition 属性应用于 Firefox 中 animation 内的属性。

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

ps。您的某些元素中缺少-moz-box-sizing: border-box;。