Transitions: Smooth State Changes

8 min read

Adding Motion Between States

CSS transitions animate property changes from one state to another. Instead of snapping instantly from the default style to the :hover style, the browser interpolates between the two over a duration you specify.

css

/* Syntax: property duration timing-function delay */
.button {
  background: #6366f1;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;

  /* Transition a single property */
  transition: background-color 200ms ease;

  /* Transition multiple properties */
  transition:
    background-color 200ms ease,
    transform 150ms ease,
    box-shadow 200ms ease;

  /* Transition all animatable properties (use sparingly) */
  transition: all 200ms ease;
}

.button:hover {
  background: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

Timing Functions

ease — starts fast, slows down (default, most natural)
linear — constant speed
ease-in — starts slow, ends fast
ease-out — starts fast, ends slow (good for exit animations)
cubic-bezier(x1,y1,x2,y2) — custom curve for full control

Prefer transitioning transform and opacity over layout properties like width, height, or margin. Transform and opacity are composited on the GPU and don't trigger layout recalculation, giving you buttery 60fps animations.

Ready to test yourself?

Practice CSS— quiz & coding exercises