DOM Animation & CSS Transition

DOM animation often works by using JavaScript to add or remove CSS classes.

CSS defines the visual transition. JavaScript decides when the class changes.

Basic Pattern

.box {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease;
}
 
.box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

const box = document.querySelector(".box");
 
box.classList.add("is-visible");

Why Use CSS For Animation

• CSS transitions are simple for hover, fade, move, and scale effects.
• JS should control state, not manually animate every frame.
• classList.add(), remove(), and toggle() keep the code readable.

Related

• ClassList
• Add & Change HTML
• JS - DOM and Browser