I got inspired by a cool post on cursors made by Geoff: https://css-tricks.com/using-css-cursors/
Here he noted that animated gifs are not supported – instead Geoff showed us a cool JS solution. This got me thinking ( and fiddling ). There must surely be a way with CSS only I thought. Maybe (ab)use @keyframe? And indeed that did the trick – paired with a couple of images ( one for each frame ).
I had 5 images – so I used 5 keyframes ( well 6 if you count 100% as a seperate one ). Here is the pen:
http://codepen.io/Jan-Timon/pen/amkLWL
The animation runs every .25 seconds, wich gives us a 20fps animation.
Downside: It only works in chrome as far as I can tell :(
But don’t worry. You can still get an animated cursor by using a little JS:
http://codepen.io/Jan-Timon/pen/ZpZLxL
The cursor URL is simply being replaced every 50 milliseconds* by a self invoking timeout function. I used an array to store the different URL values, so I could loop over them easily.
This works cross-browser. The .cur file format is nescessary to make it work on ie and edge. I used the following website to convert .png to .cur: https://convertio.co/nl/png-cur/
(*)50 milliseconds timeouts result in 20 frames per second animation
