✨ CSS Advanced

Transitions

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can animate a property change smoothly with transition, choose a duration and easing, and know which properties to animate for smooth performance.

Without transitions, changes on a web page are instant and jarring — a button just snaps to a new colour. A transition smooths that change over time, and it's the difference between an interface that feels cheap and one that feels polished. The best part: it's pure CSS, triggered by something as simple as hovering.

1The transition property

A transition says: "when this property changes, animate it over this much time." You put it on the element's normal state, and define the change (often) in :hover:

.btn {
  background: #FF6B00;
  transition: background 0.3s ease;
}
.btn:hover {
  background: #3C3489;
}

The shorthand is transition: <property> <duration> <timing>. Animate several at once by listing them, or use all to transition every changing property.

Keep durations short — 0.15s–0.3s feels responsive. Anything over half a second starts to feel sluggish for everyday UI like buttons and links.
Hover me — with and without a transition
HTML
CSS
Live preview
What's happening: Hover both buttons in the preview. The 'smooth' one eases into its new colour and grows slightly; the 'instant' one snaps with no transition. Same colours — the transition is the whole difference in feel.
Key points
  • Put transition on the normal state; trigger the change (often) in :hover.
  • Shorthand: transition: property duration timing; (e.g. background 0.3s ease).
  • Keep UI transitions short — 0.15s–0.3s feels responsive.

2Easing and what to animate

The timing function controls the rhythm of the motion:

  • ease — starts slow, speeds up, slows down (the pleasant default).
  • linear — constant speed (good for spinners).
  • ease-in / ease-out — accelerate / decelerate.

Animate the cheap properties

For buttery-smooth motion, prefer transitioning transform (move, scale, rotate) and opacity. The browser can animate these very efficiently. Avoid transitioning properties that change layout — like width, height, top or margin — because they force the page to re-calculate positions on every frame, which can stutter on slower phones.

Respect motion preferences. Some people get motion sickness from animation. Wrap big effects in @media (prefers-reduced-motion: reduce) to tone them down — an accessibility courtesy (more on this in the Animations lesson).
Key points
  • Timing functions set the rhythm: ease (default), linear, ease-in, ease-out.
  • Prefer transitioning transform and opacity — they animate smoothly.
  • Avoid transitioning layout properties (width/height/top/margin); they can stutter.
  • Honour prefers-reduced-motion for users sensitive to motion.

★ Practical: a polished button

In any playground:

  1. Make a button that smoothly changes background on hover over 0.2s.
  2. Add a subtle transform: scale(1.05) on hover, also transitioned.
  3. Try different timing functions (ease, linear, ease-out) and feel the difference.
  4. Confirm you transitioned transform/background, not width or margin.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Custom Properties (Variables)
Next →
Animations