Vue 纯CSS抛物线

单独一个小球

        <div ref="wraper1" class="wraper55">
          <div class="item55"></div>
        </div>

Css

.item55 {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
  top: 50px;
  left: 20px;
  background-color: #00aa00;
  border-radius: 50%;
  opacity: 0;
}

/*竖直运动*/
.wraper55 {
  position: absolute;
  top: 20px;
  animation: vertical-animation55 2s .5s;
  animation-timing-function: cubic-bezier(.11, -.33, .55, .11);
  animation-fill-mode: forwards;
}

/*水平运动*/
.wraper55 .item55 {
  animation: hor-animation55 2s linear .5s;
  animation-fill-mode: forwards;
}


@keyframes hor-animation55 {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(200px);
    opacity: 1
  }
}



@keyframes vertical-animation55 {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(200px);
    opacity: 1
  }
}

将小球替换成图片

        <div v-for="(items, index) in imgListArr2" :key="items.ids" ref="wraper1" :class="items.className1">
            <img v-if="indexs == index" :class="items.className2" :src="imgList2" alt="">
            <img v-else :class="items.className2" :src="imgList1" alt="" @click.prevent.stop="switchImg(index, $event)">
          </div>

data(){
    return {
        imgListArr2: [
        {
          url: require('@/assets/adaping/legend1.png'),
          className1: 'wraper',
          className2: 'item',
          className3: 'item-1',
          title: '老干部活动中心',
          ids: 1
        },
        {
          url: require('@/assets/adaping/legend1.png'),
          className1: 'wraper2',
          className2: 'item2',
          className3: 'item2-1',
          title: '行政中心',
          ids: 2

        },
        {
          url: require('@/assets/adaping/legend1.png'),
          className1: 'wraper3',
          className2: 'item3',
          className3: 'item3-1',
          title: '政务服务中心',
          ids: 3

        },
        {
          url: require('@/assets/adaping/legend1.png'),
          className1: 'wraper4',
          className2: 'item4',
          className3: 'item4-1',
          title: '振兴办公区',
          ids: 4

        },
        {
          url: require('@/assets/adaping/legend1.png'),
          className1: 'wraper5',
          className2: 'item5',
          className3: 'item5-1',
          title: '郁州南路办公区',
          ids: 5

        },
      ],
    }
}

样式修改坐标点就可以了

有大佬可以告诉我怎么动态修改keyframes-->transform-->translateX里面的值吗

@keyframes hor-animation {

  0% {

    transform: translateX(0px);

  }

  100% {

    transform: translateX(7.037rem);

    opacity: 1

  }

}