how to move a (basket)ball across the screen with delay?

I have an image of a ball that I wish to move using JS. I will add more precise code later for .left and .top that will precisely describe the throw of the ball with gravity function. What I have now goes too fast to see.

I have:

HTML

<img id="bal1" src="Afbeeldingen/bal1.png" alt="Bal" width="100" height="100">

JS

    for (var x = 0; x < 10; x++) {
      document.getElementById('bal1').style.left=30*x +"px";
      document.getElementById('bal1').style.top=30*x +"px";
    
    } 

This works, but it goes too fast to see the movement. How would I make this into a visible animation?

thanks!