The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Animated cursor

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #245857

    I got inspired by a cool post on cursors made by Geoff:

    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:

    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:

    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:

    (*)50 milliseconds timeouts result in 20 frames per second animation

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.