webkitAnimationEndのサンプル
アニメーションが終了しました。
.s {
width: 50px;
height: 50px;
border-radius: 50%;
background: #C00;
-webkit-animation: foo 2s 1;
animation: foo 2s 1;
}
.s.end {
-webkit-transform: translate(200px, 0);
transform: translate(200px, 0);
}
.endAnime {
opacity: 0;
}
.endAnime.on {
opacity: 1;
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
@-webkit-keyframes foo {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(200px, 0);
}
}
@keyframes foo {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(200px, 0);
}
}
var prefix = (/webkit/i).test(navigator.appVersion) ? 'webkit' : '';
var animationEnd = prefix ? (prefix + 'AnimationEnd') : 'animationend';
var s = document.querySelector('.s');
var endAnime = document.querySelector('.endAnime');
s.addEventListener(animationEnd, function() {
this.classList.add('end');
endAnime.classList.add('on');
});