For some reason the braindead zombies who decide to kill decades-long basic HTML and CSS features have decided to depricate yet another classic feature - animated cursors. In some browsers they may work, but in most browsers they are no longer functional by having a .gif as the cursor in CSS. I don't understand why these retards remove classic HTML or CSS features, it's not like anybody uses them anyways. It's just to strip out all fun and simplicity.

Anyways, there is a way using only CSS to make animated cursors. It is more complicated than simply putting a .gif as the cursor in the body of the CSS. Here's how:

We will be using the "animate" functionality available in CSS to refer to each individual frame of a .gif to animate the cursor in CSS.
(If you're unfamiliar with "animate", it allows you to change colors, sizes, and images within the times you specify for each frame.)

First, in the body of your css, specify that the cursor will be animated. This is what you will need:

As you notice, we include "animation", followed by "animatecursor". "animatecursor" is simply the name I've chosen for the animation we are following after this. You can name "animatecursor" to anything you want, this will make sense in a second.

"1s" is how long our animation will be in total. 1s meaning "1 second". You can alter this as you please, even something like "0.6s" is valid.

"infinite" means our animation will loop for eternity. It's important to have this included if you want the .gif cursor to continue repeating.

Here is a cursor that is 4 frames. This is a good one to test with due to simplicity, though I dislike the cursor itself.

As you can see, after "@keyframes" we have the name "animatecursor", which is the custom name I decided to call this animation. You can name this anything, just be sure that in the body of the cursor CSS, the name after "animation:" is the same as the name after "@keyframes".

@keyframes determines what our animation will do, @keyframes is used for animation in CSS.

In this case, we want to animate different images in a sequence. If I have a .gif that is a total of 4 frames, I will want to include all 4 frames in the animation of our CSS. As you can see, each image is different, meaning when I render this page, each frame will show up in sequence.

It's important to note that TIMING is dire when we do this, and timing is dependant on how many frames total are in your .gif cursor. In this case, I have 4 total .gifs. The percentages (0%, 40%, 80%, and 100%) determine how long during the 1 second (1s) playtime of the animation, each .gif will show.

If you want each frame to show for an even amount of time, you will have to divide the amount of frames by 100. I will explain how to do this accurately:

We do not account for the first frame (0%) in our equation for determining how long each frame's percentage needs to be. This is because 0% will remain 0% at all times (since it's the first frame), meaning we do not need to equate for this frame in our equation. A value of 0 is irrelevant.

Instead, all of the following frames with valid percentages (1%-100%) will be equated for. In this case, if I have 4 frames with 1 frame being at 0%, I will ACTUALLY only equate for 3 frames.

In this case, I will divide 100/3 to determine roughly how long each frame's percentage should be. 100 divided by 3 is ~33.3333333333.

Here is how the CSS should look if we want each frame to be exactly the same in timed length:

Technically, going by the math we did, 100% should be 99%, but we want the animation to last from 0%-100%, so I rounded it up. Now each frame of our animation will display for an even amount of time. If you render this in a stylesheet and view it in your browser, you should get the intended results.

TIPS:

Here is a cursor that is 4 frames. This is a good one to test with due to simplicity, though I dislike the cursor itself.

Remember that the url should lead to the correct path from your server/your computer. Copying and pasting the CSS I have won't work for you because my filepath is different than yours (rename cursor: url("/images/gifs/smile4.png"), to where the file is on your computer/server).

If you want the animation time (for example, 1s) to match how long the .gif file is on your computer, you can open the file using GIMP. GIMP will display in the "layers" how long each frame is. In this example, each frame is 100 milliseconds. I have a total of 8 frames, 100ms x 8= 800ms. Therefore, I will put "0.8s" instead of "1s" to match the correct speed of the gif in my cursor css. This isn't necesarry, but it does help if you want the speed to match the original .gif.

If you need assistance on this, email me: ashleyjones@icum.to
You can also call my landline 725-CUM-FART
Please leave a voice mail if I don't pick up.

Click here for my technology page.