恶心人的transform

今天又遇到H5的需求啦，恶心人的transform
效果很简单，直接上gif

背景知乎粒子化，有现成的vue-particles
主要是这个瞎动的效果，要求鼠标放上去图标不动了。
planA:
用vue的transition标签，配合velocity.js。
主要的问题在于vue触发transition的机制，

1. 条件渲染 (使用 v-if)
2. 条件展示 (使用 v-show)
3. 动态组件
4. 组件根节点
   我的需求进页面触发和鼠标移除触发。不满足需求
   planB:
   传统的写法，动态改变class名，动画都用css来写，省去js。
   这种写法可以满足需求，但是代码量较大，一共6个图标，需要写6个样式。直接上优化后的代码吧
   html部分：

<el-row style="margin-bottom:30px;">
          <el-col :span='8' v-for="(item,index) in pdata" :key='"p"+ index'>
            <h1 class="iconfont" :class="[isActive? getRandomClass(index) : '',item.icon]" @mouseover="isActive = false" @mouseout="isActive = true"></h1>
          </el-col>
</el-row>

js部分：

getRandomClass(index) {
      return `active${this.randomIndex[index]}`;
},
// 产生随机数组
generateRandom(count) {
      let originalArray = []; //原数组
      //给原数组originalArray赋值
      for (let i = 0; i < count; i++) {
        originalArray[i] = i;
      }
      originalArray.sort(function() {
        return 0.5 - Math.random();
      });
      let arr = [];
      for (let i = 0; i < count; i++) {
        arr.push(originalArray[i]);
      }
      return arr;
}

css部分

<style lang="scss" scoped>
@for $i from 0 through 5 {
  $delay: 2s * $i;
  .active#{$i} {
    animation: _scale 12s $delay ease infinite;
  }
}
@keyframes _scale {
  12.5% {
    transform: scale(1.2, 1.2);
    transform-origin: 50% 50%;
  }
  25% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
<style>

有两个bug：
1.触发mouseover事件后，文字会加粗抖一下
解决方法：transform-origin: 50% 50%;
add：添加transform-origin: 50% 50%;后图标缩放时会卡帧，去掉就好了。文字不会卡帧。
2.图标不会出现问题，换成文字缩放的时候会抖。
没解决，欢迎大神们帮忙