animation css loop 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);