setinterval and setitimeout not working on ios mobile devices and firefox with pure javascript

set interval and set timeout not working on ios mobile devices and firefox

I have one button on the page with pulsate animation, I have one class "zoom-in-out" on which I have added the animation
after 2 loops the button is getting pulsated, the below code is working fine on chrome but not on firefox and ios devices

I have used set interval and set timeout to add the delay of x seconds to remove and add the class for animation

code snippets

function animateDelayFunc(){
    var btnClass = document.querySelector(".btn");
    btnClass.classList.add("zoom-in-out");
    setInterval (function() {
      btnClass.classList.remove("zoom-in-out");
  }, 2000, true);
    setTimeout(function() { animateDelayFunc(); }, 4000, true);
}
animateDelayFunc();

.btn {
    width: 50%;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 30%);
    background-color: #ea4f5a;
    height: 50px;
    font-size: 20px;
    line-height: 30px;
    border: 0;
    position: relative;
    max-width: 200px;
    border-radius: 35px;
    font-weight: 700;
    color: #fff;
    margin: 10px auto 10px auto;
    cursor: pointer;
    will-change: transform;
    -webkit-font-smoothing: antialiased;   
    -webkit-filter: blur(0);
    filter: blur(0);
}
.zoom-in-out {
    animation: zoom-in-out-animation 1s;
    animation-iteration-count: infinite;
}
@keyframes zoom-in-out-animation {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, 0px) scale(1.05);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

<button class="btn zoom-in-out">Continue</button>

I have tried various ways with StackOverflow suggestions but they are not working for me