关于animation:实现多个元素的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>