Как заставить мяч вращаться и зациклить анимацию

Question

Это рабочая(суперкривая и тупая) анимашка, и чтобы её "дополнительно оживить" надо бы заставить шар вращаться (как колесо, и чтоб скорость вращения мяча была примерно равна скорости мяча), и чтобы, доехав до конца маршрута, он телепортировался в начало и опять повторял движение. И, есть ли какой-нибудь способ удлинить дорогу на 20px? И ещё, если можно, добавить кнопочку, останавливающую всю анимацию.

train.onclick = function() {
    let start = Date.now();
    var inputs = document.getElementById('numbers')
    var inputt = document.getElementById('numbert')

    var numbers = Number(inputs.value);
    var numbert = Number(inputt.value);

    var sum = 0; 
    let delta = 20*numbers/(numbert*500); 
    let timer = setInterval(function() {
      let timePassed = Date.now() - start;
      train.style.left = sum + 'px';
      sum += delta;    
      if (sum > numbers) clearInterval(timer);
    }, 20);
    }

#train {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 50px 50px,  red, black);
  border-radius: 100%;
  position: relative;
}

@keyframes train {
    0%{bottom: 0%;}
    50%{transform: rotate(360deg);}  
    100%{transform: rotate(360deg);}   
}

#road {
  height: 10px;
  width: 50px;
  background: black;
  margin-top: 15px;
}

  <div id="road"></div>
  
    
  <h3>Время</h3>
  <input type='number' id='numbert' value="2">


  
  <h3>Расстояние</h3>
  <input type='number' id='numbers' value="300" oninput="road.style.width = `${this.value}px`;">

БЛОГ НА HUSL

Как заставить мяч вращаться и зациклить анимацию

Ответы (0 шт):