0

ログインスライドの単純なアニメーションをバウンスインアウトするために、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 とまったく同じで、問題なく動作します。

4

1 に答える 1

1

Chrome とは異なり、プロパティはFirefoxtransition内のプロパティに適用されます。animation

プロパティを削除する[-moz-]transitionと、CSS3 アニメーションは Firefox と Chrome の両方で正常に動作します。

ps。あなた-moz-box-sizing: border-box;の要素のいくつかが欠けています。

于 2013-03-08T21:41:02.117 に答える