ど〜も〜、水を飲むだけで体重が落ちてきて若干不安なたかの人です！
最近は仕事の方も忙しくなってきて、気づけばほぼ１ヶ月くらい放置してましたが、まだ失踪はしておりません( ✧≖´◞౪◟≖`)
さて、今回も前回に引き続き（１ヶ月くらい前ですがw）CSSアニメーションの続き記事を描いていこうと思います。
最近は演出に凝ったサイトも増えてきましたよね。
例に漏れず私もそのようなサイトを作ることも多くなってきました。
そこで便利なのがCSSアニメーション！
サクッと実装できて便利ですよね！
ただ、この便利なCSSアニメーションにも欠点が。。。。
複数のアニメーションを連続させる場合、終了後に次のアニメーションをするというトリガーがCSSにはありません。。。
CSSのみでやるとすると、animation-delayで実行を遅らせるなどの方法があります。
しかし、この方法だと前後のアニメーション時間が変更されてしまうと再度animation-delayを調整する必要があります。
そして何より、ちょっとダサいですよね（笑）
もっとスタイリッシュに前のアニメーションが終わってから実行させたいですよね？
そのためにはアニメーションの終了を検知ができてしまえばどうにでもなる気がします！
その方法がこちら！
どうでしょう？
アニメーションが検知されていますよね？
CSSアニメーションには@keyframesを使用する方法とtransitionを使用する方法があります。
それぞれ検知方法が異なります。
下に例を書きました。
@keyframesを検知するにはanimationendをtransitionにはtransitionendを使用します。
そのままのネーミングで実にわかりやすい！！
とっちも検出する場合は、onの引数にどちらも記述してあげましょう！
この方法で複雑なアニメーションも連続して指定できますね！
では、今回はこの辺で！
さて、一杯やりますか！！
以上、たかの人がお送りしました！
