css3 一个旋转和缩放动画的元素

需求: 有六个元素在不同的延迟和动画速度下执行旋转和缩放动画

实现效果：

 实现代码：

<template>
  <div class="container">
    <div class="container">
      <div class="animate">
        <div class="ball ball1">
          <p>1</p>
        </div>
        <div class="ball ball2">
          <p>2</p>
        </div>
        <div class="ball ball3">
          <p>3</p>
        </div>
        <div class="ball ball4">
          <p>4</p>
        </div>
        <div class="ball ball5">
          <p>5</p>
        </div>
        <div class="ball ball6">
          <p>6</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
/* 旋转动画 */
.animate {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  left: 12%;
  top: 100px;
}
@keyframes animX {
  0% {
    left: 0px;
  }
  100% {
    left: 250px;
  }
}
@keyframes animY {
  0% {
    top: -30px;
  }
  100% {
    top: 150px;
  }
}
@keyframes scale {
  0% {
    transform: scale(0.7);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.7);
  }
}
.ball {
  width: 100px;
  height: 100px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.ball:hover {
  transform: scale(1.2);
}
.ball {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
  background-color: rgb(223, 223, 191);
}
/* 6个图x和y轴动画加起来是18s , 18s/6 等于 3s
每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半（9s/2） */
.ball1 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
    animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
    scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.ball2 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
}
.ball3 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
}
.ball4 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
}
.ball5 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
}
.ball6 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
}
</style>

以上代码也是借鉴别人方法，通过css3实现的旋转动画存在一个小问题，每个盒子在运动过程中会发生抖动bug，如果盒子是图片的话抖动效果会明显一点，如果可以的话大佬们提出以上的不足一起探讨哦~