How do you pause an animation?

[Marc Hede]

I am making a live subway map, where I have divs representing trains, moving up and down the map. I had no problem making them move, but I would like them to stop for a few seconds at each station. Can someone tell me how I can include this in my code? What line do I need to add, and where?

window.onload = () => {
startSetTimeoutAnimation();
};

function startSetTimeoutAnimation() {
const refreshRate = 1000 / 60;
const maxXPosition = 400;
let rect = document.getElementById('rect0');
let speedX = 0.01;
let positionX = 25;

window.setInterval(() => {
  positionX = positionX + speedX;
  if (positionX > maxXPosition || positionX < 25) {
    speedX = speedX \* (-1);
  }
  rect.style.top = positionX + 'px';
}, refreshRate);

}

[Sherin_Mathew]

Try This Code:

div {
width: 100px;
height: 100px;
background: blue;
position: relative;
animation: mymove 3s infinite;
animation-play-state: paused;
}

@keyframes mymove {
from {left: 0px;}
to {left: 400px;}
}

Click the buttons to Play/Pause the animation:

Play
Pause

function myPlayFunction() {
document.getElementById("myDIV").style.animationPlayState = "running";
}

function myPauseFunction() {
document.getElementById("myDIV").style.animationPlayState = "paused";
}