CSSでアニメーションさせる方法としてanimationとtransitionの2つのプロパティがあります。 これらはJavaScriptと合わせることによって、アニメーション終了後にイベント処理を行うことができます。 イベントの種類 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;
![CSSのアニメーション終了後にイベントを実行する | Monohibi - モノヒビ](https://cdn-ak-scissors.b.st-hatena.com/image/square/51db79dc6710e49c7b88f8b74172741a8ae5bba5/height=288;version=1;width=512/https%3A%2F%2Fimages.ctfassets.net%2Fqoaw1h63mo84%2F1t8mqLPr0GTMPbIrYL5NFx%2F45400716b12c60cbc5ead0aa7354996c%2Feyecatch.png)