CSSでアニメーションさせる方法としてanimationとtransitionの2つのプロパティがあります。

これらはJavaScriptと合わせることによって、アニメーション終了後にイベント処理を行うことができます。

Contents

イベントの種類

animationの場合

animationendをaddEventListenerに追加します。webkitの場合はwebkitAnimationEndにして追加します。

下記のコードは2秒間かけてshowという文字が表示された後に、alertの内容が表示されます。

HTML

<div id="show">show</div>

CSS

@keyframes showAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#show {
  animation: showAnimation 2s linear;
}

JavaScript

const element = document.getElementById('show')

element.addEventListener('animationend', () => {
  // アニメーション終了後に実行する内容
  alert('animationend')
})
element.addEventListener('webkitAnimationEnd', () => {
  // アニメーション終了後に実行する内容
  alert('webkitAnimationEnd')
})

addEventListenerは複数のイベント設定ができないので、webkitと分けて書きます。

transitionの場合

animationと同様にtransitionendをaddEventListenerに追加します。webkitの場合はwebkitTransitionEndにして追加します。

下記のコードはclickボタンを押すと、2秒間かけてshowという文字が表示された後に、alertの内容が表示されます。

HTML

<div id="show">show</div>
<button id="show-button">click</button>

CSS

#show {
  opacity: 0;
  transition: opacity 2s linear;
}

#show.is-animation {
  opacity: 1;
}

JavaScript

const element = document.getElementById('show')
const showButton = document.getElementById('show-button')

showButton.addEventListener('click', () => {
	element.classList.add('is-animation')
})

element.addEventListener('transitionend', () => {
  // アニメーション終了後に実行する内容
  alert('transitionend')
})
element.addEventListener('webkitTransitionEnd', () => {
  // アニメーション終了後に実行する内容
  alert('webkitTransitionEnd')
})

こちらもaddEventListenerは複数のイベント設定ができないの、でwebkitと分けて書きます。

さいごに

animationendやtransitionend以外にも、CSSのアニメーションが始まった時のイベントのanimationstartなどもありますが、基本的な使い方はanimationendやtransitionendと同じです。

CSSアニメーションはJavaScriptより手軽に実装でき動作も軽いので、なるべくアニメーションはCSSだけで完結出来るようにするのがベターなのかなと思います。

JavaScriptがイベントを検知してくれることで、CSSだけでのアニメーションの手助けとなり、実装方法の幅が広がります。

参考