웹 애니메이션 구현 방법

 

setTimeout() or setInterval()

let count = 0;
function animate() {   
  setTimeout(() => {
    if(count >= 20) return;
    console.log('현재시각은', new Date());
    count++;
    animate();
  },500);
}
animate();

 

requestAnimationFrame

var count = 0;
var el=document.querySelector(".outside");
el.style.left = "0px";

function run() {
   if(count > 70) return;
   count = count + 1;
   el.style.left =  parseInt(el.style.left) + count + "px";
   requestAnimationFrame(run);
}

requestAnimationFrame(run);

 

HTML & CSS를 이용한 구현방법

https://dhl7799.tistory.com/18