アニメーション、アニメーション実行の終了を判断、js でアニメーションの @keyframes を追加

var anim = document.querySelector('div')
anim.addEventListener('animationend',function(e){
    //动画执行完毕 执行
    console.log(e)//当前动画的属性
    console.log(e.animationName) //当前动画的名字;
})

 jsでアニメーション化された@keyframesを追加します

var style = document.styleSheets[0];
    style.insertRule('@keyframes anim_two{0%{ transform: translateX('+ window.innerWidth+'px); }100%{ transform: translate(-100%);}}');
    style.insertRule('@keyframes anim_three{0%{ transform: translateX('+ window.innerWidth+'px); }100%{ transform: translate(-100%);}}');

おすすめ

転載: blog.csdn.net/Cat_LIKE_Mouse/article/details/124258420