CSS - Перемещение курсора

Question

Можно ли анимировать с переходом CSS статус курсора? Я пробовал с этим кодом, но кажется, что он не работает.

.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

Это не представляется возможным с помощью CSS в одиночку. Переход только работает на анимационных свойствах; тогда как cursor не отображается. Для получения полного списка анимационных реквизитов, пожалуйста, проверьте here.

Обратите внимание, что вы также можете положить .gif для элемента .cursor; неважно, что существуют определенные ограничения по размеру, которые применяются соответственно в разных браузерах.

Answer 2

Cursor не является анимационным свойством, и было бы странно, если бы оно было честным. Если вы хотите создать анимацию я предложил бы создавая GIF что бы начать как default и заканчиваются, как pointer.

Затем вы можете использовать, что GIF, как показано ниже:

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

Answer 3

Вы можете, указав URL к нему в CSS:

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

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