Mouse Cursor As .Gif not Animating

Question

I am trying to use a gif as a mouse cursor but the cursor is not animating at all for me. I've tried a few different sizes, but no luck.

html, body {
height: 100%;
margin: 0;
padding: 0;
cursor: url(White-Sperm.gif), url(Sperm-Cursor.png), auto;
}

JS Fiddle referencing the gif I'm using is here:

http://jsfiddle.net/Fq9RL/

My designer says that in Safari, it animates "a little" for him, but is stalling and not smooth. It doesn't animate at all in Safari for me and does not work in Chrome for either of us.

Has anyone tried this technique before? We've tried using fewer frames in the gif, a smaller delay, a smaller gif size, etc. Any help is much appreciated!

Answer 1

A similar question was asked here :

Animated cursor support in web applications?

After doing some more research, I don't think it's possible at the moment. It doesn't seem that any of the browsers support animated cursors as of 2/8/2012 using the CSS cursor property. I suppose it could be done using JavaScript to repeatedly change the value of the cursor property every few frames to make it appear animated, but that may be more trouble than it is worth.

So the answer seems to be that it isn't possible at the moment.

Answer 2

One solution is to use the CSS animation to animate the cursor image from a frame to another:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: url(frame1.gif), auto;
    animation: cursor 1s linear infinite;
}
@keyframes cursor{
    0% { 
        cursor: url(frame1.gif), auto;
    }
    50% { 
        cursor: url(frame2.gif), auto;
    }
    100% { 
        cursor: url(frame3.gif), auto;
    }
}

Add as many frames as needed.