JavaScript addEventListener animationendが発生しない

Question

前提・実現したいこと

animationendが発生しません
appendで追加後に、setTimeoutで間隔をあけてmvを付与、
mvのアニメーション終了を探知したいのですが
発生しません
どのようにしたら発生しますでしょうか

該当のソースコード

<style>
body,html{
width:100%;
height:100%;
overflow:hidden;
}
.move{
transform: translateX(100%);
transition: 0.5s ;
}
.move.mv  {
opacity:1;
transform:translateX(0%);
}
</style>

<script>
window.onload=function(){
div=document.createElement("div");
div.id="div";
div.style.width="30%";
div.style.height="20%";
div.style.position="absolute";
div.style.right="0%";
div.style.top="0%";
div.classList.add("move");
div.style.background="red";
div.addEventListener("animationend", function() {
alert("アニメーション終了");
});
document.body.appendChild(div);
setTimeout('div.classList.add("mv")',1000);
}
</script>

Answer 1

animation は使ってないので animationend ではなく transitionend じゃないでしょうか

Comments

[zaaaai]

動きました・・・
知りませんでした
感謝いたします