loop animation css code example

Example 1: css animation loop

animation-iteration-count:infinite;

Example 2: animation shorthand css

animation: name time func delay iteration dir fill play;
animation: none 0s ease 0s 1 normal none running;

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

Example 3: css animation infinite loop

div {
  animation-iteration-count: number|infinite|initial|inherit;
}

Example 4: css animation shorthand

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

Example 5: 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 6: javascript animation loop

function step() {    // UpdateUI();    window.requestAnimationFrame(step);  }  window.requestAnimationFrame(step);