I have a gif that I converted into an images. After the user clicks on the screen, the cursor is animated with keyframes. It works perfectly in every browser except Safari. I tried almost everything, what am I doing wrong?

CSS

@keyframes cursor {
  0% {
    cursor: url("./images/frames/1.gif"), auto;
  }
  20% {
    cursor: url("./images/frames/2.gif"), auto;
  }
  40% {
    cursor: url("./images/frames/3.gif"), auto;
  }
  60% {
    cursor: url("./images/frames/4.gif"), auto;
  }
  80% {
    cursor: url("./images/frames/5.gif"), auto;
  }
  100% {
    cursor: url("./images/frames/6.gif"), auto;
  }
}

@-webkit-keyframes cursor {
  0% {
    cursor: url("./images/frames/1.gif"), auto;
  }
  20% {
    cursor: url("./images/frames/2.gif"), auto;
  }
  40% {
    cursor: url("./images/frames/3.gif"), auto;
  }
  60% {
    cursor: url("./images/frames/4.gif"), auto;
  }
  80% {
    cursor: url("./images/frames/5.gif"), auto;
  }
  100% {
    cursor: url("./images/frames/6.gif"), auto;
  }
}

JS

const productPage = document.querySelector('.product-page')

      if (!this.state.done) {

        productPage.style.animation = "cursor 0.2s linear"
        productPage.style.webkitAnimation = "cursor 0.2s linear"

        setTimeout(() => {
          productPage.style.animation = "none"
        }, 210);
        
      }

I even tried to use pure JS instead of keyframes

const productPage = document.querySelector('.product-page')

      if (!this.state.done) {

        let gifNumber = 1

        const cursorInterval = setInterval(() => {

          discountPage.style.cursor = `url("./images/frames/${gifNumber}.gif") 37 37, auto`

          gifNumber++

          if (gifNumber > 5) {
            clearInterval(cursorInterval)
          }

        }, 1);

      }
 

this one also worked in other browsers but not in Safari. I guess it's not possible to dynamically change the cursor in Safari