I don’t see any actual update in planet movement animation, but the timefactor slider changing the position frame.
You’re right, I apologize for the mistake in my previous response. The problem is that the transformation properties for each planet were not properly concatenated into a single string. Here is an updated version of the JavaScript code that should fix the issue: <!DOCTYPE html>
<html>
  <head>
<style>
body {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: sans-serif;
}

#sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: yellow;
}

.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation-timing-function: linear;
  opacity: 0.8;
}

#mercury {
  animation: orbit-mercury 56d linear infinite;
  background-color: #aaaaaa;
  transform: translateX(43px);
}

#venus {
  animation: orbit-venus 225d linear infinite;
  background-color: #ff6600;
  transform: translateX(107px);
}

#earth {
  animation: orbit-earth 365d linear infinite;
  background-color: #3366cc;
  transform: translateX(146px);
}

@keyframes orbit-mercury {
  from {
    transform: rotate(0deg) translateX(43px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(43px) rotate(-360deg);
  }
}

@keyframes orbit-venus {
  from {
    transform: rotate(0deg) translateX(107px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(107px) rotate(-360deg);
  }
}

@keyframes orbit-earth {
  from {
    transform: rotate(0deg) translateX(146px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(146px) rotate(-360deg);
  }
}

input[type=range], label[for=time-factor] {
  display: inline-block;
  vertical-align: middle;
}

label[for=time-factor] {
  margin-right: 10px;
}

#time-factor {
  width: 150px;
}
    </style>
  </head>
  <body>
    <div id="sun"></div>
    <div id="mercury" class="planet"></div>
    <div id="venus" class="planet"></div>
    <div id="earth" class="planet"></div>
    <label for="time-factor">Time factor:</label>
    <input type="range" id="time-factor" min="0.1" max="10" step="0.1" value="1.0">
    <script>
    const timeFactorInput = document.getElementById('time-factor');
const mercury = document.getElementById('mercury');
const venus = document.getElementById('venus');
const earth = document.getElementById('earth');

let timeFactor = 1;

function updateTimeFactor() {
  timeFactor = parseFloat(timeFactorInput.value);
}

timeFactorInput.addEventListener('change', updateTimeFactor);

function animate() {
  requestAnimationFrame(animate);

  const now = new Date();
  const mercuryAngle = (now / (56 * timeFactor * 24 * 60 * 60 * 1000)) * 360;
  const venusAngle = (now / (225 * timeFactor * 24 * 60 * 60 * 1000)) * 360;
  const earthAngle = (now / (365 * timeFactor * 24 * 60 * 60 * 1000)) * 360;

  mercury.style.transform = 'rotate(' + mercuryAngle + 'deg) translateX(43px) rotate(' + -mercuryAngle + 'deg)';
  venus.style.transform = 'rotate(' + venusAngle + 'deg) translateX(107px) rotate(' + -venusAngle + 'deg)';
  earth.style.transform = 'rotate(' + earthAngle + 'deg) translateX(146px) rotate(' + -earthAngle + 'deg)';
}

animate();
    </script>
  </body>
</html>