4

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>
Ivan
  • 34,531
  • 8
  • 55
  • 100
Alessio
  • 3,404
  • 19
  • 35
  • 48
  • 4
    What do you expect / want to happen? How would you define a cursor that is "halfway between `default` and `pointer`"? – Niet the Dark Absol Aug 04 '16 at 12:29
  • 1
    @NiettheDarkAbsol No, I mean a smooth transition, like you can do with opacity or other CSS properties – Alessio Aug 04 '16 at 12:30
  • Why do you want to change the cursor? - The transitions only animate items on the page, that is what CSS is for. To do that to the cursor you might need to try something like javascript. but i wouldnt really recommend it – Andrew Aug 04 '16 at 12:31
  • @Andrew Thanks for your reply – Alessio Aug 04 '16 at 12:32
  • 1
    @Alessio Yes, sure, a smooth transition, but a smooth transition has to pass through the halfway point, doesn't it? So what would it look like at that moment? ;) – Niet the Dark Absol Aug 04 '16 at 12:34
  • Also with a lot of mobile users wont even know that you have done this as they dont have a cursor. – Andrew Aug 04 '16 at 12:34
  • @NiettheDarkAbsol Good point of view, I didn't think about it :) – Alessio Aug 04 '16 at 12:35
  • This might lead you down the right sort of path: http://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors – Andrew Aug 04 '16 at 12:38

3 Answers3

6

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.

Angel Politis
  • 10,955
  • 14
  • 48
  • 66
Juan Ferreras
  • 2,801
  • 2
  • 13
  • 16
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;
}
Angel Politis
  • 10,955
  • 14
  • 48
  • 66
0

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;
}
Rajkamal C
  • 59
  • 2