vue动态绑定animation-name与未能实现的随机帧动画

起因

书接上文，一通操作搞出来的three动画被否决之后为了追赶进度我又马不停蹄的开始重做动画。原本以为平面动画应该很容易的，没想到还是出了点问题。对于不同文字进行平移动画，我觉得展现出一种杂乱无章的效果比较好，首先我采用了一种比较简单的实现方法：列出3-4种动画，然后给文字动态绑定动画名称，结果出了点问题。

代码

    <div
      class="qccenter-text"
      v-for="(item, index) in config.drgs"
      :key="`drgs-${index}`"
      :style="textItemStyle(item, index)"
    >
      {{item.name}}
    </div>

  computed: {
    // 文字块样式
    textItemStyle() {
      return function(item, index) {
        const { left, top } = item;
        const nameIndex = index % 4;
        return {
          left, 
          top, 
          'animation': `textMove${nameIndex} 4s linear infinite`,
        };
      };
    }
  },

css动画示例，后面的只是每个时间点y轴坐标不同

@keyframes textMove0 {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(20%);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0);
  }
}

config.drgs里面每一项保存文字的定位信息和内容，然后给每一项添加不同的动画——通过绑定不同的动画名来实现，然而动画并没有生效。