Animation Tutorials

CSS Animations

Use @keyframes to define the animation steps and animation property to apply it.

Copy@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.box.spin{
  animation:spin 2s linear infinite;
}

JavaScript Animations

Use requestAnimationFrame for smooth, performant animations.

Copylet angle=0;
function rotate(){
  angle+=2;
  box.style.transform=`rotate(${angle}deg)`;
  requestAnimationFrame(rotate);
}
const box=document.getElementById('js-box');
function start(){requestAnimationFrame(rotate);}
function stop(){cancelAnimationFrame(rotate);}

Live Examples