title: Changing CSS Variable via JS
body: <p>I'm trying to change the values of a Keyframe through a Click Event.</p>
  
  <p>What I currently have is the following code:</p>
  
  <pre><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;
      }
  }
  </code></pre>
  
  <p>I'm setting the variable at Root and Body and then I'm trying to change them via the next clickEvent:</p>
  
  <pre><code>arrowRight.addEventListener("click", function(){
      ++clickTargetCounter;
  
      backgroundImg.classList.add("firstPanel-R");
  
      finalPositionBackground = clickTargetCounter * -2037;
      initialPositionBackground = finalPositionBackground - -2037 + 'px';
  
      root.style.setProperty("--background-positionF", clickTargetCounter * -2037 + 'px', 0)
      body.style.setProperty("--background-positionI", finalPositionBackground - -2037 + 'px', 0)
  });
  </code></pre>
  
  <p>For some reason the CSS variables stay at 0 and don't update to the values set in the click event.</p>