The best animation is usually the simplest one that works.
Direct answer
For most effects, add or remove a CSS class with JavaScript and let a CSS transition do the animation. For more control, use the Web Animations API (element.animate) or requestAnimationFrame. Animate transform and opacity for smooth results.
CSS plus a class
.box { transition: transform 0.3s ease; }
.box.moved { transform: translateX(100px); }
box.classList.toggle("moved");
Web Animations API
box.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 400, easing: "ease-out", fill: "forwards" }
);
requestAnimationFrame
let x = 0;
function step() {
x += 2;
box.style.transform = `translateX(${x}px)`;
if (x < 300) requestAnimationFrame(step);
}
requestAnimationFrame(step);
Tips
- Animate
transformandopacityrather than layout properties. - Respect
prefers-reduced-motion. - Keep animations short.
Where Teyro fits
Teyro's Interactive Web Pages with JavaScript course turns this into short lessons you can play in a few minutes a day. It has 37 lessons, and you can start free.
The bottom line
Start with CSS transitions and reach for JavaScript only when you need it.
