如何使css3动画重新执行

日常遇到问题，使用css3动画的时候，想要让动画能够重新执行，答案在百度不好找，不过最后还是ojbk了。通过删除类名，再增加类名来达到重新开始动画。

<img class="musicImg musicImage" :src="listen.musicPic" alt="">

.musicImg{
    width:1.2rem;
    height:1.2rem;
    border-radius:50%;
    float:left;
    margin-top:-0.2rem;
    margin-left:0.2rem;
}
.musicImage{
    animation:rotate 12s linear 0.2s infinite;
    -webkit-animation:rotate 12s linear 0.2s infinite;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

watch: {
        // 监听数据变化，重新开始音乐图片旋转
        listen:{
            handler:function(newUrl){
                let img = document.getElementsByClassName('musicImg')[0]
                if(img){
                    // 通过删除增加类名，达到重新开始动画
                    img.classList.remove("musicImage");
                    console.log('歌曲改变了')
                    // 如果没有这个语句，那么就不能重新加载动画，这个很重要
                    void img.offsetWidth;
                    img.classList.add("musicImage");
                }
            },
            deep:true
        }
    },

另外，有一个方法是通过设置两个功能一样的动画，然后在两个动画之间切换，也可以达到重新开始动画的效果。