在一个数值范围内进行动画

.cursor_transistion {
    animation-name: cursor_transistion;
    animation-duration: 4s;
    animation-play-state: running;
}
@keyframes cursor_transistion {
    0% {background-color: #7AA8CE;}
    100% {background-color: #CE7A7A;}
}

JS

var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;
$(document).mousemove(function(e){
    $mouseX = e.pageX;
    $mouseY = e.pageY;    
});
var $loop = setInterval(function(){
// change 12 to alter damping higher is slower
$xp += (($mouseX - $xp)/12);
$yp += (($mouseY - $yp)/12);
$("#cursor").css({left:$xp +'px', top:$yp +'px'});  
}, 30);
var timestamp = null;
var lastMouseX = null;
var lastMouseY = null;
var mrefreshinterval = 500; // update display every 500ms
 var lastmousex=-1; 
 var lastmousey=-1;
 var lastmousetime;
 var mousetravel = 0;
 var lastmousetravel = 0;
//pauses CSS color animation while cursor is not moving
setInterval(function () {
        if (lastmousetravel === mousetravel){
            $('.cursor_transistion').css('animation-play-state', 'paused');
        } else {
            $('.cursor_transistion').css('animation-play-state', 'running');
        }
    }, 20);
 $('html').mousemove(function(e) {
     var mousex = e.pageX;
     var mousey = e.pageY;
     if (lastmousex > -1)
         mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
     lastmousex = mousex;
     lastmousey = mousey;
     var speed = lastmousex + lastmousey;
    setTimeout(function(){
        lastmousetravel = mousetravel;
    }, 20);
});