Tengo un gif que convertí en imágenes. Después de que el usuario hace clic en la pantalla, el cursor se anima con fotogramas clave. Funciona perfectamente en todos los navegadores excepto en Safari. Intenté casi todo, ¿qué estoy haciendo mal?

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

Incluso traté de usar JS puro en lugar de fotogramas clave

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

este también funcionó en otros navegadores pero no en Safari. Supongo que no es posible cambiar dinámicamente el cursor en Safari