Back to CSS

CSS Tutorial

Transitions

Create smooth changes between visual states.

Transitions make hover, focus, and state changes feel smoother.

They are useful for buttons, cards, menus, and interface feedback.

css
.button {
  transition: background-color 200ms ease, transform 200ms ease;
}

.button:hover {
  transform: translateY(-2px);
}