Animation effect(rotating circle) css breaks in Safari browser while working in Chrome

Question

I've made water wave animation effect which is basically composed of 3 circles with border radius 45%.

HTML

   <div class="bubs move">
      <div class="circle move">
        <div class="wave-one move"></div>
        <!-- <div class="wave-two move"></div>
        <div class="wave-three move"></div>
        <div class="wave-four move"></div> -->
        <!-- <i class="fas fa-moon move"></i>
        <i class="fas fa-moon blur move"></i> -->
        <i class="fas fa-sun"></i>
        <i class="fas fa-sun blur move"></i>
        <!-- star -->
        <div class="star move">
          <i class="fas fa-asterisk star1 move"></i>
          <i class="fas fa-asterisk star2 move"></i>
          <i class="fas fa-asterisk star3 move"></i>
          <i class="fas fa-asterisk star4 move"></i>
          <i class="fas fa-asterisk star5 move"></i>
        </div>
      </div>
    </div>

CSS

.bubs {
  /* display: none; */
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.move {
  display: none;
}

.circle .section-first {
  /* width: 400px;
  height: 400px; */
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* border: 7px solid #464343; */
  border-radius: 100%;
  background: linear-gradient(#3c5aff, #52f2fd);
  transform: translate3d(0, 0, 0);
}

.wave-one {
  width: 250rem;
  height: 250rem;
  /* width: 225rem;
  height: 225rem; */
  top: -230%;
  left: -40%;
  position: absolute;
  /* top: -180%; */
  /* left: -20%; */
  border-radius: 40%;
  /* border-radius: 45%; */
  /* background: #1d074b; */
  background: #52f2fd;
  animation: move 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  /* transform: translate3d(0, 0, 0); */
  /* transform: translateZ(100rem); */
}

.wave-two {
  width: 250rem;
  height: 250rem;
  position: absolute;
  top: -230%;
  left: -40%;
  border-radius: 40%;
  background: rgba(34, 79, 242, 0.8);
  animation: move 5s infinite linear;
  /* transform: translateZ(100rem); */
}

.wave-three {
  width: 250rem;
  height: 250rem;
  position: absolute;
  top: -230%;
  left: -40%;
  border-radius: 45%;

  background: rgba(3, 169, 244, 0.8);
  /* background: #4e944f; */
  /* border: 6px solid rgba(131, 119, 152, 0.7); */
  animation: move 7s infinite linear;
  /* transform: translateZ(50rem); */
}

.wave-four {
  width: 650px;
  height: 650px;
  position: absolute;
  top: -100%;
  left: -30%;
  border-radius: 46%;
  background: linear-gradient(rgba(252, 251, 232, 0.1) 10%, transparent);
  animation: move 7s infinite linear;
}

@keyframes move {
  100% {
    transform: rotate(360deg);
    /* -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg); */
    -webkit-transform-style: preserve-3d;
  }
}

I was initially adjusting codes mainly for Chrome but in Safari, not only animation breaks in an unexpected way but also position changes. When I decrease the size of circle from 250rem to 225rem, circle doesn't break in Safari. How am I supposed to make animation and position adjusted to both browsers?