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

我正在使用Animate.css来为登录幻灯片提供简单的动画。CSS3 Animate.css在Firefox上看起来很奇怪

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一样，并且在那里滚动得很好。

来源

2013-03-08 fernandofleury

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

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

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

来源

2013-03-08 21:41:02

感谢队友，我将以此作为回帖 – fernandofleury 2013-03-09 00:58:50

没问题，从'.overlay form [role =“widget”]中移除'（-moz | -webkit）-transition'并且再次评论仍然有动画问题。 '=]' – 2013-03-09 01:05:42

感谢队友，关于ff上trasitions的真的很好的信息。我已经设法通过完全删除它来调整它。动画的持续时间是一起触发的，而不是缓解。 – fernandofleury 2013-03-09 01:38:20

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

回答

相关问题