实现多个元素的css动画同时执行

css动画是队列式的，当前一个动画执行完才会执行下一个动画，也就是你删除了动画类名，以为清除了动画，其实只是将动画暂停而已，想要动画每次都是重新开始的解决方法是，在css里再写一个一模一样的动画，两个动画类名来回切换就能每次重新开始了，比如：

<template>
 <div>
    <div v-for="(item,index) in list" :key="index" :class="[active===index?'':show?'changeColor':'changeColor2']" @click="changeColor(index)">颜色</div>
 </div>
</template>
<script>
   export default{
     name:"color",
     data(){
      return {
        list:[
         {name:"a"},
         {name:"b"},
         {name:"c"}
        ],
        show:true,
        active:0
      }
     }
    methods:{
     changeColor(){
       this.active=index;
       this.show=!this.show
     }
    
    }
   }
</script>
<style>
@keyframes colors {
    0%{ 
      color: red
    }
    100% {  
      color: yellow
    }
  }
@keyframes colors2 {
    0%{ 
      color: red
    }
    100% {  
      color: yellow
    }
  }
  .changeColor {
    animation:colors 5s linear 0s infinite;
    -webkit-animation:colors 5s linear 0s infinite;
  }
  .changeColor2 {
    animation:colors2 5s linear 0s infinite;
    -webkit-animation:colors2 5s linear 0s infinite;
  }
</style>