实现多个球沿椭圆轨迹进行旋转动画

先上效果：

多球旋转动画

在旋转的过程中，球的大小，透明度在不断地发生变化，转到前端的时候不透明且最大，转到后面的时候透明度很高且最小。

效果实现：

1、准备七个球

<div class="center" id="center" ref="center">
        <!-- <div class="cen"></div> -->
        <div class="juece ball" @mouseover="handleOver" @mouseout="handleOut" @click="toPath(pathList[4].subjectId)"></div>
        <!-- <div class="waiquan1"></div> -->
        <div class="fenxi ball" @mouseover="handleOver" @mouseout="handleOut" @click="toPath(pathList[5].subjectId)"></div>
        <!-- <div class="waiquan2"></div> -->
        <div class="huishang ball" @mouseover="handleOver" @mouseout="handleOut" @click="toPath(pathList[6].subjectId)"></div>
        <!-- <div class="waiquan3"></div> -->
        <div class="diaodu ball" @mouseover="handleOver" @mouseout="handleOut" @click="toPath(pathList[0].subjectId)"></div>
        <!-- <div class="waiquan4"></div> -->
        <div class="wuzi ball" @mouseover="handleOver" @mouseout="handleOut" @click="toPath(pathList[1].subjectId)"></div>
        <!-- <div class="waiquan5"></div> -->
        <div class="liliang ball" @mouseover="handleOver" @mouseout="handleOut" @click="toPath(pathList[2].subjectId)"></div>
        <!-- <div class="waiquan6"></div> -->
        <div class="yuan ball" @mouseover="handleOver" @mouseout="handleOut" @click="toPath(pathList[3].subjectId)"></div>
        <!-- <div class="waiquan7"></div> -->
      </div>

2、想要球动起来，并且沿着椭圆轨迹，要用到运动的合成，同时添加X轴方向和Y轴方向上的动画，同时在过程中改变球的大小和透明度。

@keyframes animX {
        0% {
            left: 0px;
        }

        50% {
            left: 1000px;
        }
        100% {
            left: 0px;
        }
    }

    @keyframes animY {
        0% {
            top: 0px;
        }

        50% {
            top: 600px;
        }

        100% {
            top: 0px;
        }
    }

    @keyframes scale {

        0% {
            transform: scale(0.5);
            opacity: 0.3;
        }

        50% {
            transform: scale(1);
            opacity: 1;
        }

        100% {
            transform: scale(0.5);
            opacity: 0.3;
        }
    }

3、把动画样式加到球上，那其中一个球（中间最前面一个球为例）

.ball4 {
        animation: animX 20s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite,
            animY 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite,
            scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite;
    }

解释以上代码：

X轴方向动画持续20秒，动画开始直接进入播放5秒时的状态，此时应该在向右运动过程中中间的位置。Y轴方向动画持续20秒，动画开始从起始状态（最高点开始播放）。缩放和透明度动画持续20秒，开始处于半透明，最小状态。

该动画实现了第四个球，从最上方中间位置开始，经过5秒钟，移动到了椭圆的最右边。10秒时运动到最下方，此时球最大，透明度为1。。。。。

4、给其他球添加动画样式，通过设置动画的延时时间（正值为延迟播放，负值表示直接进入播放动画n秒之后的状态），可改变球的初始位置。最后实现以上动画效果。

PS:
给球绑定鼠标移入事件，鼠标移上，所有球动画停止。鼠标移出，动画继续。

 handleOver(){
      console.log('出发了mouseover')
      // console.log()
      console.log(document.querySelectorAll('.ball'))
      document.querySelectorAll('.ball').forEach((item,index)=>{
        item.style.animationPlayState = 'paused';
      })
    },
    handleOut(){
      document.querySelectorAll('.ball').forEach((item,index)=>{
        item.style.animationPlayState = '';
      })
    },