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

Question

修复-- 只需将光标:指针放在关键帧选择中即可解决问题。 ---- 在代码中，修复在注释中，因此您可以区分过去和现在--

我有一个 html 格式的图像对象，我正在使用关键帧在圆形路径上设置动画。该图像具有 css cursor:pointer 样式和 onclick:"document.location='a url';return false;"' 功能。在 Firefox 和 IE 中，图像沿其路径进行动画处理，并在将鼠标悬停在其上时保持其光标样式和点击功能。但是，在 Chrome 中，我失去了指针和点击功能。我无法单击图像以定向到 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

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