CSS @keyframes 光标动画在悬停时闪烁

Posted

技术标签:

【中文标题】CSS @keyframes 光标动画在悬停时闪烁【英文标题】：CSS @keyframes cursor animation flickers on hover 【发布时间】：2022-01-23 12:46:06 【问题描述】：

我创建了一个 @keyframes 动画，它用自定义图像改变光标，并在悬停时将其分配给 div。

页面加载后第一次悬停在div上时，光标会闪烁或消失一秒钟，然后按预期正常工作。

为什么会发生这种情况，如何解决？

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>

【问题讨论】：

您的问题的正确minimal reproducible example 直接属于您的问题，请不要将其转储到外部平台上。 “为什么会这样” - 因为加载图像需要时间？ “如何修复？” - 通过预加载必要的图像，以便从那一刻起可以从浏览器缓存中获取它们。 （如果您不知道如何预加载图像，请进行一些研究，这已经是一个老话题了。） 感谢您的回答，我在网上搜索以测试您的想法并成功了。 【参考方案1】：

问题是图像最初需要时间来加载，解决方案是预加载图像。

感谢CBroe 帮助我解决这个问题。

JS预加载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>

【讨论】：

以上是关于CSS @keyframes 光标动画在悬停时闪烁的主要内容，如果未能解决你的问题，请参考以下文章

使用@keyframe 的交替动画

Css悬停动画闪烁/循环

带有悬停的css闪烁动画

悬停效果闪烁的 CSS 动画，在 FF 中未正确显示

当元素使用多个动画时，使用 :hover 触发 @keyframes 动画

css3背景过渡在第一个时闪烁：悬停