Transitions

Transitions

Animate a change from one state to another smoothly (hover, focus...).

What transitions do

Without a transition, style changes are INSTANT. With one, the browser animates between old and new values over time.

.btn {
  background: gray;
  transition: background 0.3s ease;
}
.btn:hover {
  background: green;
}

Hover now fades gray → green over 0.4s.

The pieces

transition: property duration timing-function delay.

• property: background, opacity, transform, all...
• duration: 0.3s or 300ms.
• timing-function: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(...).
• delay: 0.2s, wait before starting.

Multiple transitions

div {
  transition: background 0.3s, transform 0.5s ease 0.1s;
}

Transition individual properties

transition-property, transition-duration, transition-timing-function, transition-delay.

Not everything transitions

Only animatable properties (color, transform, opacity, etc.). display can't smoothly animate (use visibility/grid tricks).

TL;DR

• transition = smooth change between states.
• syntax: property duration timing delay.
• Triggered by :hover, :focus, class changes.
• Comma to animate several properties.
• Only animatable properties work.