External Brain

DOM Animation and CSS Transition

1 min read

DOM Animation and 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.

Graph View

Backlinks