Animated cursor support in web applications?

Question

Do any web browsers support animated cursors?

I've been searching the web to add custom cursors to my web application. I've been finding a lot of non animated (.cur) and animated (.ani) cursors, and using the correct CSS so that my application has custom cursors! It seems that the animated cursors are not supported in the web browsers I tried and I was wondering if there is any way possible to put animated cursors into my web application.

Answer 1

I managed to accomplish this using CSS keyframes, animating the source image of the cursor. It works in Chrome and Safari (though it can get a little glitchy if you've got a ton of stuff running). Good enough for my personal site!

* {
  cursor: url(frame1.png), auto;
  -webkit-animation: cursor 400ms infinite;
  animation: cursor 400ms infinite;
}

@-webkit-keyframes cursor {
  0% {cursor: url(frame1.png), auto;}
  20% {cursor: url(frame2.png), auto;}
  40% {cursor: url(frame3.png), auto;}
  60% {cursor: url(frame4.png), auto;}
  80% {cursor: url(frame5.png), auto;}
  100% {cursor: url(frame6.png), auto;}
} 

@keyframes cursor {
  0% {cursor: url(frame1.png), auto;}
  20% {cursor: url(frame2.png), auto;}
  40% {cursor: url(frame3.png), auto;}
  60% {cursor: url(frame4.png), auto;}
  80% {cursor: url(frame5.png), auto;}
  100% {cursor: url(frame6.png), auto;}
}