javascriptのアニメーションをブートストラップモーダルポップアップのCSSクラスに変換する

Question

私は既存のプロジェクト（他の開発者によって実装されています）でブートストラップのモーダルポップアップを持っています。クライアントが以下のjsコードを使用してモーダルポップアップを開くこのため

$(dialog).css('top', '-1000px').show().animate({ top: '-1px' }, { 
      duration: 1100, easing: 'easeInOutBack', complete: function() { 
      // No need of this 
      } 
     }); 

は、私は多くの問題に直面しています）。/クローズダイアログを開き、モーダル方法をブートストラップし、私は私がhttp://hawkee.com/snippet/16154/で見つけたものに近いmanulyオーバーレイのようなすべてのもの、など

を管理する必要のためのものモーダルポップアップを開くカスタムビヘイビアを使用するこのカスタムjsコードbuが必要ない私は純粋なCSSだけでこれを達成することができます。このサイトごとに変更する必要があります。.modal.fadeと.modal.fade.inクラスです。

私はあまりアニメーションでエキスパートではないので、私はこのjsの書かれた効果をCSSだけに変換する方法についていくつか指針が必要です。

いくつかの後にR & D私はこれを使うことができるかもしれません。http://easings.net/#easeInOutBackしかし、わかりません。

私が今までにこれを達成した：

http://codepen.io/kaushikthanki/pen/kXGqjo

Answer 1

Kaushikによる、

を私はあなたが共有hawkee例に基づいてスタイルを変更しました。期待どおりに動作することを願っています。

.modal.fade .modal-dialog { 
    top: -1000px; 
    -webkit-transition: all 1100ms ease-in-out; 
    -moz-transition: all 1100ms ease-in-out; 
    transition: all 1100ms ease-in-out; 
} 

.modal.fade.in .modal-dialog { 
    top: -1px 
}