Need some helt with JavaScript animation

I am making a prototype for an animated map,
I made a simple subway map, and what I want to do is to make a few rectangles that move along the subway lines and stop at each station marker on the image.
The project: http://handig.dk/animation/index.html

As you can see, I already know how to make the div move.
My questions are:
How do I make it stop for 10 seconds at each station?
How do I make the animation responsive, so that it will stay on the line when I resize the image?

The code:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="EXAM PROJECT 2019" content="EXAM PROJECT">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

            <div class="container">
                    <h2>Open Map</h2>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>
                  
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" role="dialog">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                          </div>
                          <div class="modal-body">
                                    <div id="rect0" class="rect timeout"></div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

        
        <script src="main.js" async defer></script>
    </body>
</html>
  .modal-body {
      background-image: url(map.png);
      background-repeat: no-repeat;
      background-size: 70%;
      width: 100%;
      height: 600px;

  }
  
  .rect {
    position: absolute;
    width: 20px;
    height: 20px;
  }
  
  .timeout {
    background: orange;
  }
window.onload = () => {
    startSetTimeoutAnimation();
  };
  
  function startSetTimeoutAnimation() {
    const refreshRate = 1000 / 60;
    const maxXPosition = 400;
    let rect = document.getElementById('rect0');
    let speedX = 0.05;
    let positionX = 0;
  
    window.setInterval(() => {
      positionX = positionX + speedX;
      if (positionX > maxXPosition || positionX < 0) {
        speedX = speedX * (-1);
      }
      rect.style.left = positionX + 'px';
    }, refreshRate);
  }

When I first read your description, I thought you were wanting the square to actual move up and down on the map instead of just going back and forth across the top of the modal.

I do. I have not yet positioned it because I wanted to know if there was a different way to do it, I could position it by telling it how many px it should move from top to bottom of the map, but that will not work when I resize it.

You will need to use percentages and absolute positioning.