как создать цикл для margin?

Намного проще и удобней для этих целей применить возможности CSS3

Вот приблизительно так а неговнокодить как некоторые

<div id="robot" style="background: red; width: 5vh;height: 5vh">1</div>
<script>
setTimeout(()=>
    robot.style.cssText+="transition-duration: 15s;transition-timing-function: ease-out;margin-left: 90vh;"
,1000);
</script>


⚤

Можно конечно и так:
setTimeout(function () {
 robot.style.marginLeft = '10px';
 const intrvl = setInterval(() => {
  let ml = parseInt(robot.style.marginLeft);
  robot.style.marginLeft = (ml += 10) + 'px';
  if (ml >= 510)
   clearInterval(intrvl);
 }, 500);
}, 1500);
, но анимацию обычно делают через requestAnimationFrame()... чтобы все плавненько было.

решение у меня заняло чуть дольше, чем я думал: 15 минут, вместо 3х.

Вот как оно выглядит:
https://jsfiddle.net/h0y4o6us/

Тут надо не забывать учитывать несколько вещей:
1) что данные стиля хранятся как string (вместе с значением "px" или любого другого обозначения системы измерения (ну там, em, % и т. п.)).
Соответственно, получая значение стиля, надо его превратить в число, очистив от этих вот "px" и всего прочего (я это делаю с помощью replace(), преобразовать в число (делаю с помощью parseInt()), а вот потом уже - действовать с числом, прибавляя нужное.

2) Важный момент. Тебе нужна рекурсивная (т. е. самовызывающаяся) функция, которая опирается на ВНЕШНЕЕ (т. е. обявленное вне этой функции) число, которое в этой функции ты будешь уменьшать (у тебя оно равно 50).

В общем, смотри что у меня получилось, надеюсь, тебе это будет полезно.
Играйся в песочницах типа jsfidlle побольше - и всё будет получаться!