Transitions & Transform

transition property

transition: property duration timing-function smooths a change between two states — e.g. from normal to :hover. Without it, changes jump instantly.

A smooth hover

Background color fades over 200ms instead of snapping.

button {
  background-color: #264de4;
  transition: background-color 200ms ease-in-out;
}

button:hover {
  background-color: #1a3aad;
}

transform functions

translate(x, y) moves, scale(n) resizes, rotate(deg) spins — all without affecting layout or triggering reflow, which makes them fast.

Combining transform + transition

A card that lifts and grows slightly on hover.

.card {
  transition: transform 150ms ease-out;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
}