CSS3は、おそらくどこかにクラスを追加...

Question

はbodyタグで全身をアニメーション化することなく、カーソル画像にCSS3のトランジションを追加することが可能です

をカーソル遷移を追加しますか？

.cursor { cursor: url("/images/light1_CROP.png"), auto; 
    animation-iteration-count: infinite; 
    animation-name: changewidth; 
    animation-direction: alternate; 
    animation-duration: 4.1s; 
} 
[...] 

動作しません ... CSSのcursorプロパティで指定した画像をアニメーション化することはできません

Answer 1

：あなたは、カーソルのプロパティをアニメーション化することはできません。さらに、アニメーションがページ上でいくつかのdivになっていてカーソル自体ではないので、あなたがそれをやろうとしたやり方はうまくいかない。 通常のカーソルを非表示にしたり、カーソルイメージをdiv内に配置したり（私の例では、バックグラウンドイメージとして選択します）、カーソルと共に移動することができますjavascript。

これで、好きなようにカーソル - divをアニメートできます。

$(document).mouseenter(function() { 
 
    $('.cursor').show(); 
 
}); 
 
$(document).mouseleave(function() { 
 
    $('.cursor').hide(); 
 
}); 
 
$(document).mousemove(function(e) { 
 
    var posX = e.pageX - 19, 
 
    posY = e.pageY - 21; 
 
    $('.cursor').css({ 
 
     left: posX + 'px', 
 
     top: posY + 'px' 
 
    } 
 
); 
 
});

.cursor { 
 
    background-image: url("http://stormfall.linuxweb.net/images/light1_CROP.png"); 
 
    width: 39px; 
 
    height: 42px; 
 
    animation-iteration-count: infinite; 
 
    animation-name: changewidth; 
 
    animation-direction: alternate; 
 
    animation-duration: 4.1s; 
 
    position: absolute; 
 
    display: none; 
 
    top: -21px; 
 
    left: -19px; 
 
} 
 

 
body { 
 
    cursor: none; 
 
} 
 

 
@keyframes changewidth { 
 
    from { 
 
    -ms-transform: scale(0.5, 0.5); 
 
    -webkit-transform: scale(0.5, 0.5); 
 
    -moz-transform: scale(0.5, 0.5); 
 
    transform: scale(0.5, 0.5); 
 
    } 
 
    to { 
 
    -ms-transform: scale(1.5, 1.5); 
 
    -webkit-transform: scale(1.5, 1.5); 
 
    -moz-transform: scale(1.5, 1.5); 
 
    transform: scale(1.5, 1.5); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Move your mouse here... 
 
<div class="cursor"> 
 
</div>

しかし1つの欠点がある：これは限りカーソルのdivは、すべてのクリックのようになりますので、あなたが何をクリックしたくないとして働くので、あなたならばあなたのページにリンクやボタンのようないくつかのクリック可能な要素がある場合は、カーソルdivからその下にあるすべてのクリックイベントをリダイレクトする方法を見つけなければなりません。

Answer 2

。 しかし、間隔ごとに画像を変更することで、JavaScriptを使用して行うことができます。それは前に指摘したように

チェックthis