嗨，这是我在stackoverflow上的第一个问题，所以请不要过分地拷问我：）

我有一个由mousemove上的eventListener调用的函数。该函数将鼠标坐标写入两个css变量。遗憾的是，由于某种原因，这并不会在每次调用该函数时更新

这是eventListener调用的函数

var textMoved = false;
var initialCoordinates = {x: 0, y: 0};
var documentRoot = document.querySelector(":root");

// ...

document.addEventListener("mousemove", animateType)

function animateType(e) {
    //check if its the first time the mouse is moving
    if (!textMoved) {
        // if yes, set the initial coordinates
        textMoved = true;
        initialCoordinates = {
            x: (e.clientX / window.innerWidth) * 100,
            y: (e.clientY / window.innerHeight) * 100,
        };
        console.log("initial coordinates", initialCoordinates)
    } else {
        // if not, calculate a offset from the initial coordinates so the text doesn't flick when the mouse is moved the first time
        const {clientX, clientY} = e;
        const x = initialCoordinates.x - (clientX / window.innerWidth) * 100;
        const y = initialCoordinates.y - (clientY / window.innerHeight) * 100;
        documentRoot.style.setProperty("--entry-offset-1", x + "px");
        documentRoot.style.setProperty("--entry-offset-2", y + "px");
        console.log("offset", x, y);
    }
}

div {
  background-color: red;
  height: 20px;
  width: 20px;
  position: absolute;
  transform: translate(var(--entry-offset-1), var(--entry-offset-2));
}
body {
  padding: 150px;
}

<div>

</div>

https://gifyu.com/image/S7X4m
不知怎么的，我移动鼠标越快，它就越慢。有时候它就像半秒钟，直到css变量被更新。函数被明确地正确调用，console.log与鼠标移动一致。而且，没有控制台错误或类似的东西
为什么每次调用函数时不覆盖css变量？
先谢了！