CODEWITHSUNDEEP
htmlcss
Alessio
Alessio

Reputation: 3610

CSS - Cursor Transition

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>

Upvotes: 4

Views: 10174

Answers (3)

Angel Politis
Angel Politis

Reputation: 11313

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;
}

Upvotes: 2

Juan Ferreras
Juan Ferreras

Reputation: 2861

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.

Upvotes: 6

Rajkamal C
Rajkamal C

Reputation: 59

You can, by specifying a url to it in CSS:

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

.test:hover{        
    cursor:url(smiley.gif),url(myBall.cur),auto;
}

Upvotes: 0

Related Questions