CSS3のアニメーション終了時のイベント

CSSのtransitionやanimationの終了時に何かjavascriptで処理をしたい場合、以下のようにすればイベントを取得できます。

transitionの場合

html
<div class="square"></div>
css
.square {
   display: inline-block;
   width: 100px;
   height: 100px;
   background: #00F;
   transition: transform 2s;
}

.square:hover {
    transform: rotate(180deg);
}
javascript
//jQuery使わない場合
var el = document.querySelector('.square');

el.addEventListener('transitionend', function() {
    // transition終了時の処理
    alert('transitionend');
});

//jQueryの場合
$('.square').on('transitionend', function() {
    // transition終了時の処理
    alert('transitionend');
});

transitionendというイベントが発行されますので、後はこの後に処理を加えればOKです。

動作サンプル

See the Pen transitionend demo by monochrome (@monochrome-design) on CodePen.

animationの場合

html
<div class="square"></div>
css
.square {
   display: inline-block;
   width: 100px;
   height: 100px;
   background: #00F;
}
.square:hover {
    animation: rotate 2s;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(180deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(180deg);
    }
}
javascript
//jQuery使わない場合
var el = document.querySelector('.square');

el.addEventListener('animationend', function() {
    // animation終了時の処理
    alert('animationend');
});

//jQueryの場合
$('.square').on('animationend', function() {
    // animation終了時の処理
    alert('animationend');
});

こちらはanimationendというイベントが発行されますので、transition同様に処理を加えればOKです。

動作サンプル

See the Pen animationend demo by monochrome (@monochrome-design) on CodePen.

古いブラウザに対応する場合は

Chrome58、firefox54(b12)、IE11、Edgeで確認しましたが、特に問題なく動作しました。・・・が、一部古いブラウザの場合、プレフィックスを付けないと動作しない事もあるので、その場合には以下のように記述すれば大丈夫です。

// transitionの場合
el.addEventListener('webkitTransitionEnd mozTransitionEnd oTransitionEnd transitionend', function() {
    // transition終了時の処理
    alert('transitionend');
});

// animationの場合
el.addEventListener('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationend', function() {
    // animation終了時の処理
    alert('animationend');
});