loop animation code example

Example 1: css animation loop

animation-iteration-count:infinite;

Example 2: javascript animation loop

const refreshRate = 1000 / 60;const maxXPosition = 400;let rect = document.getElementById('rect1');let speedX = 1;let positionX = 0;function step() {  positionX = positionX + speedX;  if (positionX > maxXPosition || positionX < 0) {    speedX = speedX * (-1);  }  rect.style.left = positionX + 'px';  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

Example 3: javascript animation loop

const refreshRate = 1000 / 60;const maxXPosition = 400;let rect = document.getElementById('rect0');let speedX = 1;let positionX = 0;window.setInterval(() => {  positionX = positionX + speedX;  if (positionX > maxXPosition || positionX < 0) {    speedX = speedX * (-1);  }  rect.style.left = positionX + 'px';}, refreshRate);

Example 4: javascript animation loop

window.setInterval(() => {    // updateUI();}, 1000 / 60);