-1
Screen recording for the problem

I've created an @keyframes animation that changes the cursor with custom images, and assigned it to div on hover.

When hovering on the div for the first time after the page is loaded, the cursor either flicker or disappear for a second, and then works normally as intended.

Why does this occur, and how can it be fixed?

div {
  background-color: #71c174;
  display: inline-block;
  margin: 0;
  padding: 10px;
  font-size: 30px;
}

div:hover {
  cursor: url(https://perseverancex.sirv.com/images/frame-24.png), auto;
  animation-name: cursor;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes cursor {
  0% {
    cursor: url(https://perseverancex.sirv.com/images/frame-1.png), auto;
  }
  4% {
    cursor: url(https://perseverancex.sirv.com/images/frame-2.png), auto;
  }
  8% {
    cursor: url(https://perseverancex.sirv.com/images/frame-3.png), auto;
  }
  12% {
    cursor: url(https://perseverancex.sirv.com/images/frame-4.png), auto;
  }
  16% {
    cursor: url(https://perseverancex.sirv.com/images/frame-5.png), auto;
  }
  20% {
    cursor: url(https://perseverancex.sirv.com/images/frame-6.png), auto;
  }
  24% {
    cursor: url(https://perseverancex.sirv.com/images/frame-7.png), auto;
  }
  28% {
    cursor: url(https://perseverancex.sirv.com/images/frame-8.png), auto;
  }
  32% {
    cursor: url(https://perseverancex.sirv.com/images/frame-9.png), auto;
  }
  36% {
    cursor: url(https://perseverancex.sirv.com/images/frame-10.png), auto;
  }
  40% {
    cursor: url(https://perseverancex.sirv.com/images/frame-11.png), auto;
  }
  44% {
    cursor: url(https://perseverancex.sirv.com/images/frame-12.png), auto;
  }
  48% {
    cursor: url(https://perseverancex.sirv.com/images/frame-13.png), auto;
  }
  52% {
    cursor: url(https://perseverancex.sirv.com/images/frame-14.png), auto;
  }
  56% {
    cursor: url(https://perseverancex.sirv.com/images/frame-15.png), auto;
  }
  60% {
    cursor: url(https://perseverancex.sirv.com/images/frame-16.png), auto;
  }
  64% {
    cursor: url(https://perseverancex.sirv.com/images/frame-17.png), auto;
  }
  68% {
    cursor: url(https://perseverancex.sirv.com/images/frame-18.png), auto;
  }
  72% {
    cursor: url(https://perseverancex.sirv.com/images/frame-19.png), auto;
  }
  76% {
    cursor: url(https://perseverancex.sirv.com/images/frame-20.png), auto;
  }
  80% {
    cursor: url(https://perseverancex.sirv.com/images/frame-21.png), auto;
  }
  84% {
    cursor: url(https://perseverancex.sirv.com/images/frame-22.png), auto;
  }
  88% {
    cursor: url(https://perseverancex.sirv.com/images/frame-23.png), auto;
  }
  100% {
    cursor: url(https://perseverancex.sirv.com/images/frame-24.png), auto;
  }
}
<body>
  <div>Hover Box</div>
</body>
Abdo Eldaly
  • 7
  • 3
  • 1
    A proper [mre] of your issue belongs directly into your question, please do not just dump it onto an external platform. – CBroe Dec 22 '21 at 10:17
  • _"Why does this occur"_ - because loading the image takes time? _"and how can it be fixed?"_ - by pre-loading the necessary image(s), so that they can be taken from the browser cache from that moment on. (If you don't know how to pre-load images, do a bit of research, that is an old topic already.) – CBroe Dec 22 '21 at 10:19
  • Thanks for the answer, I searched online to test your idea and it worked. – Abdo Eldaly Dec 22 '21 at 11:56

1 Answers1

0

The problem was that images initially took time to load, and the solution to this is preloading the images.

Thanks for CBroe for helping me with this.

The JS preloading source 

  var images = new Array()

function preload() {
  for (i = 0; i < preload.arguments.length; i++) {
    images[i] = new Image()
    images[i].src = preload.arguments[i]
  }
}
preload(
    "https://perseverancex.sirv.com/images/frame-1.png",
    "https://perseverancex.sirv.com/images/frame-2.png",
    "https://perseverancex.sirv.com/images/frame-3.png",
    "https://perseverancex.sirv.com/images/frame-4.png",
    "https://perseverancex.sirv.com/images/frame-5.png",
    "https://perseverancex.sirv.com/images/frame-6.png",
    "https://perseverancex.sirv.com/images/frame-7.png",
    "https://perseverancex.sirv.com/images/frame-8.png",
    "https://perseverancex.sirv.com/images/frame-9.png",
    "https://perseverancex.sirv.com/images/frame-10.png",
    "https://perseverancex.sirv.com/images/frame-11.png",
    "https://perseverancex.sirv.com/images/frame-12.png",
    "https://perseverancex.sirv.com/images/frame-13.png",
    "https://perseverancex.sirv.com/images/frame-14.png",
    "https://perseverancex.sirv.com/images/frame-15.png",
    "https://perseverancex.sirv.com/images/frame-16.png",
    "https://perseverancex.sirv.com/images/frame-17.png",
    "https://perseverancex.sirv.com/images/frame-18.png",
    "https://perseverancex.sirv.com/images/frame-19.png",
    "https://perseverancex.sirv.com/images/frame-20.png",
    "https://perseverancex.sirv.com/images/frame-21.png",
    "https://perseverancex.sirv.com/images/frame-22.png",
    "https://perseverancex.sirv.com/images/frame-23.png",
    "https://perseverancex.sirv.com/images/frame-24.png"
  ) 
div {
  background-color: #71c174;
  display: inline-block;
  margin: 0;
  padding: 10px;
  font-size: 30px;
}

div:hover {
  cursor: url(https://perseverancex.sirv.com/images/frame-24.png), auto;
  animation-name: cursor;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes cursor {
  0% {
    cursor: url(https://perseverancex.sirv.com/images/frame-1.png), auto;
  }
  4% {
    cursor: url(https://perseverancex.sirv.com/images/frame-2.png), auto;
  }
  8% {
    cursor: url(https://perseverancex.sirv.com/images/frame-3.png), auto;
  }
  12% {
    cursor: url(https://perseverancex.sirv.com/images/frame-4.png), auto;
  }
  16% {
    cursor: url(https://perseverancex.sirv.com/images/frame-5.png), auto;
  }
  20% {
    cursor: url(https://perseverancex.sirv.com/images/frame-6.png), auto;
  }
  24% {
    cursor: url(https://perseverancex.sirv.com/images/frame-7.png), auto;
  }
  28% {
    cursor: url(https://perseverancex.sirv.com/images/frame-8.png), auto;
  }
  32% {
    cursor: url(https://perseverancex.sirv.com/images/frame-9.png), auto;
  }
  36% {
    cursor: url(https://perseverancex.sirv.com/images/frame-10.png), auto;
  }
  40% {
    cursor: url(https://perseverancex.sirv.com/images/frame-11.png), auto;
  }
  44% {
    cursor: url(https://perseverancex.sirv.com/images/frame-12.png), auto;
  }
  48% {
    cursor: url(https://perseverancex.sirv.com/images/frame-13.png), auto;
  }
  52% {
    cursor: url(https://perseverancex.sirv.com/images/frame-14.png), auto;
  }
  56% {
    cursor: url(https://perseverancex.sirv.com/images/frame-15.png), auto;
  }
  60% {
    cursor: url(https://perseverancex.sirv.com/images/frame-16.png), auto;
  }
  64% {
    cursor: url(https://perseverancex.sirv.com/images/frame-17.png), auto;
  }
  68% {
    cursor: url(https://perseverancex.sirv.com/images/frame-18.png), auto;
  }
  72% {
    cursor: url(https://perseverancex.sirv.com/images/frame-19.png), auto;
  }
  76% {
    cursor: url(https://perseverancex.sirv.com/images/frame-20.png), auto;
  }
  80% {
    cursor: url(https://perseverancex.sirv.com/images/frame-21.png), auto;
  }
  84% {
    cursor: url(https://perseverancex.sirv.com/images/frame-22.png), auto;
  }
  88% {
    cursor: url(https://perseverancex.sirv.com/images/frame-23.png), auto;
  }
  100% {
    cursor: url(https://perseverancex.sirv.com/images/frame-24.png), auto;
  }
}
<body>
  <div>Hover Box</div>
</body>
Abdo Eldaly
  • 7
  • 3