このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

css3ではアニメーションを設定することが可能となっております。

アニメーションの設定の方法はkeyframeを設定したアニメ、transitionを設定したアニメなどがございます。

transitionアニメーションに関しては以下の記事を参照してください。

css3 transitionアニメーション

https://www.webcyou.com/?p=1937

これらをJavascriptと連携させることによって様々な表現をすることが可能になってきます。

その際、良く利用するのが、webkitAnimationEndとwebkitTransitionEndのイベントとなっております。

webkitAnimationEndとwebkitTransitionEndは、それぞれアニメーションとトランジションが終わった時に起きるイベントで

以下の様にして取得することができます。

element.addEventListener('webkitAnimationEnd', end, false); 

element.addEventListener('webkitTransitionEnd', end, false); 

webkitAnimationEnd

css3で設定したキーフレームアニメーションの終わったタイミングでイベントが発生します。

css3

.element{ -webkit-animation: anime 0.5s ease-in; }

@-webkit-keyframes anime {
  0% {
  -webkit-transform: translate(0,0);
  opacity: 0.1;
  }
  50% {
  -webkit-transform: translate(100px,0);
  opacity: 0.5;
  }
  100% {
  -webkit-transform: translate(0,0);
  opacity: 1;
  }
}

このように0.5sで要素が右に移動し左に戻るキーフレームアニメーションを設定しました。

開始の数と、webkitAnimationEndのイベント数を取得したデモを作りましたので、そちらを参照してください。

（webkit系ブラウザでの確認の方を宜しくお願い致します。safari or Chrome）

デモ

http://webcyou.com/demo/js/event/anime-trans.html

右へ移動し、左に戻ったときイベントが発生しているのが確認出来るかと思います。

webkitTransitionEnd

css3で設定したトランジションアニメーションの終わったタイミングでイベントが発生します。

上記のキーフレームで設定したアニメーションの様な動きをtransitionで設定してみました。

css3

.element{ -webkit-transition: all 0.25s ease-in; }
.element.on{ -webkit-transform: translate(100px,0); }

このように設定してみました。

同じような動きが確認出来るかと思います。

（webkit系ブラウザでの確認の方を宜しくお願い致します。safari or Chrome）

デモ

http://webcyou.com/demo/js/event/anime-trans.html#view02

でも、キーフレームアニメーションと違いが確認出来るかと思います。

キーフレームアニメーションと同様にwebkitTransitionEndでイベント取得しているのですが、

キーフレームアニメーションのイベント回数より多いかと思います。

キーフレームアニメーションでは「１右移動」「２左移動」で1セットになっていましたが、

transtionでは、1で右に移動した際に発生し、2で左に戻る時にまた発生しているためです。

また、このようにopacityを追加してみたところ、

.element.on{ 
  -webkit-transform: translate(100px,0);
  opacity: 0.5;
}

この変化もカウントされるようです。

つまり、transitionの値をallにして、プロパティを追加する度にイベント発生回数が増えることになります。

↓opacityも追加すると、右に行って左に戻るtransitionアニメはwebkitTransitionEndが4回発生しています。

デモ

http://webcyou.com/demo/js/event/anime-trans.html#view03

このような点を注意しながら使用すると良いかと思います。