イベントリスナー、

Question

を開始した私は、CSSを持っているが、ボタンがクリックされたときにそれが起こる変換ここhttp://jsfiddle.net/xCkX7/5/

この可能であれば、私はよく分からないけど、作ることが可能であろう示しますイベントリスナーか、おそらく別のメソッドがあるので、そのボタンをクリックして変換が完了すると、別のクラスが終了したばかりのトランスフォームクラスを置き換えて2番目のアニメーションを作成します。キーフレームアニメーションの使用を避けたいのは、トランスフォームにアニメーションの終了状態を使用する特定のメソッドで問題が発生するためですが、リセットされます。ここでその問題を見ることができますhttp://jsfiddle.net/xCkX7/23/

基本的に私はアニメーションをコース（2つのステップ）で実行し、終了してから別のボタンをクリックして他のトランスフォームを実行したいと思います。ここではhttp://jsfiddle.net/xCkX7/21/のように、開始変換は1つのステップに過ぎません。

Answer 1

transitionend CSSの移行が完了するたびにイベントが発生します。最初の遷移からそのイベントを聞き取り、そのイベントが発生すると2番目の遷移を開始することができます。

一部のブラウザでは、transitionendイベント名にベンダー固有のプレフィックスが付いています。あなたはこのケースで何ができるか

は以下の配列である：

1. ボタンを
2. をクリックすると最初の遷移
を開始変更を行い、対象物
3. 上transitionendイベントのイベントlistenderを追加します。
4. transitionendイベントが発生すると、他のトランジションと混同しないようにイベントリスナーを終了します。
5. 第2トランジションを開始する変更を行います

あなたがここに多段遷移の作業バージョンを見ることができます：http://jsfiddle.net/jfriend00/5FnwY/