Why does I lose cursor style and onclick functionality when animating with keyframes in css (only in Google Chrome)?

Question

FIX -- Just putting cursor: pointer in the keyframe selection fixed the problem. -- -- In the code, the fixes are in comments so you can distinguish between what was and what it--

I have an image object in html that I am animating on a circular path with keyframes. The image has a css cursor:pointer style and an onclick:"document.location='a url';return false;"' functionality. In Firefox and IE, the image animates along its path and maintains its cursor style and onclick functionality when hovering over it. However, in Chrome, I lose the pointer and onclick functionality. I can not click the image to get directed to the url in onclick and I also lose the cursor style which becomes the default arrow. When I take out the animation code, the pointer and onclick functionality work just fine. What is going on here and any suggestions to how I can work around this?

The html:

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

The 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 */  

}

The CCS Animation - located below above

@-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: Just putting cursor:pointer; in the keyframe selection fixed the problem. -- In the code, the fixes are in comments so you can distinguish between what was and what is --