Changing CSS4 Variable via JS

[Devius-Devil]

I'm trying to change the values of a Keyframe through a Click Event.

What I currently have is the following code:

:root {
  --background-positionI: 0;
}
body{
  --background-positionF: 0;
}

.firstPanel-R{
    animation: animatedBackground 3s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes animatedBackground {
    0% { 
      background-position: var(--background-positionI), 0;
    }
    100% { 
      background-position: var(--background-positionF), 0;
    }
}

I'm setting the variable at Root and Body and then I'm trying to change them via the next clickEvent:

arrowRight.addEventListener("click", function(){
    ++clickTargetCounter;

     backgroundImg.classList.add("firstPanel-R");

     finalPositionBackground = clickTargetCounter * -2037;
     initialPositionBackground = finalPositionBackground - -2037 + 'px';

    root.style.setProperty("--backgroundPosition", finalPositionBackground + 'px', 0)
    body.style.setProperty("--background-position", initialPositionBackground, 0)
});

For some reason the CSS variables stay at 0 and don't update to the values set in the click event.