Как оптимизировать анимацию под браузер Firefox?

.bg-wave-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 10rem;
  min-width: 10rem;
  z-index: 2;
}
.bg-wave-animation .wave {
  width: 100%;
  height: 100%;
  position: absolute;
  will-change: transform;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  border: 0.2rem solid rgba(0, 0, 0, 0.05);
  box-shadow: 2.6rem 1.2rem 6.6rem 0.6rem rgba(0, 0, 0, 0.25);
  border-radius: 100%;
  animation-timing-function: cubic-bezier(0, 0, 1, 1);
  fill: transparent;
}
.bg-wave-animation .wave:nth-child(1) {
  width: 130%;
  height: 130%;
  animation: 3s wave1;
  animation-iteration-count: infinite;
}
.bg-wave-animation .wave:nth-child(2) {
  width: 160%;
  height: 160%;
  animation: 3s wave2;
  animation-iteration-count: infinite;
}
.bg-wave-animation .wave:nth-child(3) {
  width: 190%;
  height: 190%;
  animation: 3s wave3;
  animation-iteration-count: infinite;
}
.bg-wave-animation .wave:nth-child(4) {
  width: 220%;
  height: 220%;
  animation: 3s wave4;
  animation-iteration-count: infinite;
}

@keyframes wave1 {
    0%{   will-change: transform; transform-origin: center; opacity: 0; transform: translate(-50%, -50%) scale(1);}
    20%{    will-change: transform; transform-origin: center; opacity: 1; transform: translate(-50%, -50%) scale(1.1);} 
    100%{    will-change: transform; transform-origin: center; opacity: 0; transform: translate(-50%, -50%) scale(1);} 
}

@keyframes wave2 {
    0%{    will-change: transform;transform-origin: center; opacity: 0; transform: translate(-50%, -50%) scale(1);}
    40%{    will-change: transform; transform-origin: center;opacity: 1; transform: translate(-50%, -50%) scale(1.1);} 
    100%{   will-change: transform;  transform-origin: center;opacity: 0; transform: translate(-50%, -50%) scale(1);} 
}

@keyframes wave3 {
    0%{   will-change: transform; transform-origin: center; opacity: 0; transform: translate(-50%, -50%) scale(1);}
    60%{    will-change: transform; transform-origin: center;opacity: 1; transform: translate(-50%, -50%) scale(1.1);} 
    100%{   will-change: transform;  transform-origin: center;opacity: 0; transform: translate(-50%, -50%) scale(1);} 
}

@keyframes wave4 {
    0%{    will-change: transform;transform-origin: center; opacity: 0; transform: translate(-50%, -50%) scale(1);}
    70%{    will-change: transform; transform-origin: center;opacity: 1; transform: translate(-50%, -50%) scale(1.1);} 
    100%{   will-change: transform;  transform-origin: center;opacity: 0; transform: translate(-50%, -50%) scale(1);} 
}

 <div class="bg-wave-animation" >
        <svg class="wave" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
        
        </svg>
        <svg class="wave" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            
        </svg>
        <svg class="wave" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            
        </svg>
    </div>