CSS3 animation .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不同，在Firefox中，transition属性应用于animation内部的属性。

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

p。你的一些元素中缺少-moz-box-sizing: border-box;