CSS Transitions

Box shadow gave you calm depth. Transitions give you calm change over time: a button softens its background on hover, a card lifts a little when focused, a link color eases instead of snapping. You still write two states — the browser interpolates between them for the duration you set.

What a transition is

A transition does not invent a new look by itself. It watches a property that already changes (often via :hover, :focus-visible, or a class) and animates that change. Without a transition, the jump is instant; with one, you get a short, readable glide.

The four longhands are transition-property, transition-duration, transition-timing-function, and transition-delay. Most everyday work uses the transition shorthand.

Property and duration

Name what may animate, and how long the change should take. Durations are times (0.2s, 200ms). Short and purposeful beats theatrical waits — UI feedback often lives around 150ms–300ms.

Put the transition on the base rule so both entering and leaving the hover state animate. Listing only the properties you mean keeps accidental layout jumps from sliding around for half a second.

Timing and delay

transition-timing-function shapes the speed curve: ease (default feel), linear, ease-in, ease-out, ease-in-out, or a custom cubic-bezier(...). transition-delay waits before the change starts — useful for staggered menus, easy to overdo on a single button.

Ease-out often feels natural for appearing UI. Linear suits progress that should read as steady. Prefer delay for intentional sequences — not to make every click feel late.

Shorthand and multi-property motion

Order in the shorthand is typically: property, duration, timing-function, delay. You can list several transitions separated by commas. Pair paint-friendly properties — transform and opacity are usually smoother than animating width, height, top, or margin.

Here depth from the previous lesson meets motion: the shadow and the lift share one hover moment. Keep the travel small so the page still feels solid.

Reduced motion and when to use animations instead

Some people prefer less motion. Respect prefers-reduced-motion: reduce by shortening or disabling non-essential transitions. Transitions shine for A → B state changes. Looping or multi-step stories belong in CSS Animations (@keyframes) later in this module — after Transforms.

Try it yourself

1. Add a 0.2s background transition to a button and hover it — then move the transition from :hover onto the base rule and compare leave-hover behavior.
2. Animate opacity with ease-out on a panel class toggle; try linear and note the feel.
3. Combine transform: translateY(...) with a softer box-shadow on card hover (two properties, one shorthand list).
4. In DevTools, emulate prefers-reduced-motion: reduce and confirm your non-essential motion backs off.
5. Resist animating height for an open menu on this exercise — leave that experiment for later patterns.

Common mistakes

• Writing transition: all 1s so every property, including layout, slides for a full second
• Multi-second durations that make the UI feel sluggish
• Animating width / top / margin when transform or opacity would do
• Ignoring prefers-reduced-motion
• Expecting a transition to loop forever — that is animation territory

Summary

• Transitions smooth property changes between states over a duration
• Control property, duration, timing-function, and delay (or use transition shorthand)
• Prefer short motion on paint-friendly properties; put transitions on the base rule
• Honor reduced-motion preferences; use keyframe animations for loops and complex sequences
• Next in Effects & Motion: Transforms