jquery - 初心者用 JQuery カスタム アニメーション

Question

クリックすると状態が変わる要素を作成していますが、特定のアニメーションでその状態に遷移させたいです。

カスタム アニメーションを実装することはできましたが、アニメーションが終了した後、元の状態に戻り続けます。

これが私が言いたいことです：http://codepen.io/FlyingEmu/pen/vEyLd

これを修正する方法についてのアイデアはありますか?

JS コード:

$(document).ready(function () {
   var CardFront = true;
$('.card').click(function () {

  if (CardFront == true) {
    CardFront = false;
    $('#card1').css("animation", "Fly_Out 1s");
    $('#card2').css("animation", "Fly_Out 1s 0.1s");
    $('#card3').css("animation", "Fly_Out 1s 0.2s");
    $('#card4').css("animation", "Fly_Out 1s 0.3s");
  }  
  else {
    CardFront = true;
    $('#card1').css("animation", "Fly_In 1s");
    $('#card2').css("animation", "Fly_In 1s 0.1s");
    $('#card3').css("animation", "Fly_In 1s 0.2s");
    $('#card4').css("animation", "Fly_In 1s 0.3s");
  }
  });
});