光标的关键帧动画在Safari中不起作用

Question

我有一个转换为图像的gif。用户单击屏幕后，将使用钥匙帧对光标进行动画。除Safari以外，它在每个浏览器中都可以正常工作。我尝试了几乎所有事情，我在做什么错？

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);
        
      }

我什至尝试使用Pure JS而不是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);

      }
 

这也可以在其他浏览器中使用，但在Safari中也不起作用。我想不可能动态更改Safari中的光标