рони, у вас часто меняются параметры анимации, которая не успевает проиграть до конца пока меняется положение курсора, что вместо ease-in-out получается сплайн... что приводит к такому интересному эффекту, когда анимация не успевает проиграть до своего конечного состояния. Мне кажется, что в данном случае лучше не стремиться к какому-то конечному состоянию, а менять параметры анимации всё время...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#etsa {
position: absolute;
width: 50px; height: 50px; margin: -25px;
display: flex; justify-content: center;
background: url(https://us.123rf.com/400wm/400/400/speedfighter/speedfighter1001/speedfighter100100101/6236656-sniper-rifle-target-cross-hairs-silhouetted-on-white-background.jpg) 0 / 50px no-repeat;
will-change: transform;
pointer-events: none;
}
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block" id="block">
<div id="etsa"></div>
</div>
<script>
// cостояние приложения
var x = { current: 0, target: 0 },
y = { current: 0, target: 0 },
isBoom = false;
var etsa = document.getElementById("etsa"),
style = etsa.style,
timer;
document.onmousemove = function(e) {
clearTimeout(timer);
timer = setTimeout(function() { isBoom = true; }, 500);
x.target = e.clientX;
y.target = e.clientY;
isBoom = false;
};
function update() {
x.current += 0.1 * (x.target - x.current);
y.current += 0.1 * (y.target - y.current);
style.transform = `translate(${x.current}px, ${y.current}px)`;
etsa.textContent = isBoom ? "Boom!" : "";
style.backgroundImage = isBoom ? "none" : "";
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>