CSS - Cursor Transition

Question

Is it possible to animate with a CSS transition the status of the cursor?

I've tried with this code but it is not working.

.test {
  cursor: default;
  width: 100px;
  height: 100px;
  background: red;
}

.test:hover {
  cursor: pointer;
  -moz-transition: cursor 500ms ease-in-out;
  -o-transition: cursor 500ms ease-in-out;
  -webkit-transition: cursor 500ms ease-in-out;
  transition: cursor 500ms ease-in-out;
}

<div class="test"></div>

Answer 1

That is not possible with CSS alone. Transition only works on animatable properties; whereas cursor does not appear. For a full list of animatable props, please check here.

Please notice you may also put .gif for the .cursor element; bare in mind there are certain size restrictions that apply accordingly on different browsers.

Answer 2

Cursor is not an animatable property and it would be kind of weird if it were to be honest. If you want to create an animation I would suggest creating a GIF that would start as default and end as pointer.

Then you can use that GIF as shown:

.test:hover {
    cursor: url("your-image.gif"), auto;
}