为什么在css中使用关键帧设置动画时会丢失光标样式和onclick功能(仅在Google Chrome中)

Question

FIX--只需将cursor:pointer放在关键帧选择中就解决了这个问题----在代码中，修复程序在注释中，因此您可以区分过去和现在的内容——

我在html中有一个图像对象，我正在使用关键帧在圆形路径上设置动画。该图像具有css cursor:pointer样式和onclick:"document.location='a url';return false;"'功能。在Firefox和IE中，图像沿着其路径设置动画，并在悬停在其上时保持光标样式和onclick功能。然而，在Chrome中，我失去了指针和onclicck功能。我无法单击图像以指向onclick中的url，并且我也失去了成为默认箭头的光标样式。当我取出动画代码时，指针和onclick功能工作得很好。这里发生了什么，有什么建议可以帮助我解决这个问题吗？

html:

<img id="imgId" onclick="document.location='a url';return false;" src="img.gif" width="30" height="30"/>

CSS

#imgId  
{            
       cursor:pointer;    
       position:absolute;  
       left:50%;  
       top:50%;  
       -webkit-animation: myOrbit 12s linear infinite; /* Chrome, Safari 5 */  
       -moz-animation: myOrbit 12s linear infinite; /* Firefox 5-15 */  
        -o-animation: myOrbit 12s linear infinite; /* Opera 12+ */  
       animation: myOrbit 12s linear infinite; /* Chrome, Firefox 16+, 
                                                  IE 10+, Safari 5 */  

}

CCS动画-位于上方下方

@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); /*cursor:pointer;*/}
    to   { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}
@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); /*cursor:pointer*/}
}
@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer*/ }
}
@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}

Answer 1

FIX：只需将cursor:pointer;放入关键帧选择中即可解决问题。--在代码中，修复程序在注释中，因此您可以区分过去和现在的内容——