Animation Guide

Introduction to Web Animation

Web animation brings life to interfaces, improves user experience, and guides attention. You can animate with pure CSS, JavaScript, or a mix of both.

CSS Keyframe Animation

Define a sequence of states with @keyframes and apply it to an element.

/* CSS */
@keyframes move{
  from{transform:translate(20px,20px);}
  to{transform:translate(calc(100% - 70px),calc(100% - 70px));}
}
.box{
  animation:move 3s infinite alternate ease-in-out;
}

JavaScript Animation with requestAnimationFrame

Ideal for complex or interactive animations.

Interactive Canvas Animation

Click anywhere inside the canvas to spawn a new bouncing ball.