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上看起來很奇怪

回答

相關問題