🎚️ CSS Transitions Fundamentals

What Is a Transition?

A CSS transition tells the browser: "when this property changes, don't jump straight to the new value — glide there over a set amount of time." The declaration lives on the element's resting state; the change is triggered elsewhere (a :hover, a new class, a media query).

💡 A useful mental model: Think of transitions as the tweening between two keyframes you never had to draw. You define the "before" and the "after"; the browser fills in every frame in between.

Good transitions do more than look nice. They guide the eye through a change, show cause and effect ("you clicked, here's the result"), and make relationships between elements clear. Overdone, they slow users down — so restraint is part of the skill.

The Four Transition Properties

1. transition-property

Names which properties animate when they change. Use a specific property, a comma list, all, or none.

.a { transition-property: background-color; }
.b { transition-property: background-color, transform, opacity; }
.c { transition-property: all;  /* animate everything that changes */ }

2. transition-duration

How long the change takes, in seconds (s) or milliseconds (ms). It defaults to 0s — which is why forgetting it means "no visible transition."

.a { transition-duration: 0.3s; }
.b { transition-duration: 300ms; } /* identical */

/* One duration per property, matched in order */
.c {
  transition-property: background-color, transform, opacity;
  transition-duration: 0.2s, 0.5s, 1s;
}

3. transition-timing-function

Controls the speed curve — how the intermediate values are distributed over the duration. Covered in depth in Section 4.

4. transition-delay

How long to wait before the transition begins. Great for staggering elements or preventing hover-jitter.

.tooltip { transition: opacity 0.2s ease 0.4s; } /* 0.4s delay before fade-in */

The Shorthand

In practice you almost always use the transition shorthand, which packs all four values in one line. The order is property, duration, timing-function, delay. The first time value is always duration; the second (if present) is delay.

/* property  duration  timing  delay */
.btn { transition: background-color 0.3s ease 0s; }

/* Duration alone is enough — timing defaults to ease, delay to 0 */
.card { transition: box-shadow 0.3s; }

/* Multiple transitions, comma-separated */
.hero {
  transition:
    transform 0.4s ease-out,
    opacity   0.6s linear 0.1s;
}

Timing Functions & Bezier Curves

A timing function maps elapsed time to progress. The same 0.5s can feel snappy, mechanical, or bouncy depending on the curve.

Custom cubic-bezier() curves

Every keyword is shorthand for a cubic-bezier(x1, y1, x2, y2). The curve starts at (0,0) and ends at (1,1); the two control points bend it. Pushing a y-value above 1 or below 0 creates overshoot — the basis of "bounce" effects.

/* A playful overshoot / bounce */
.pop { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

Tools like cubic-bezier.com let you drag the control points and preview the motion. There is also steps(n), which jumps between n discrete states instead of interpolating — handy for sprite-sheet or "ticking clock" animations.

What Triggers a Transition

A transition fires whenever a watched property's value changes. That change can come from several sources:

Pseudo-classes (the most common)

.button {
  background-color: #2563eb;
  transition: background-color 0.3s ease, transform 0.1s ease;
}
.button:hover  { background-color: #1e40af; }
.button:active { transform: scale(0.96); }
.button:focus-visible { box-shadow: 0 0 0 3px rgba(37,99,235,0.5); }

Class changes from JavaScript

const box = document.querySelector('.box');
box.addEventListener('click', () => box.classList.toggle('expanded'));

.box { transform: scale(1); transition: transform 0.4s ease-out; }
.box.expanded { transform: scale(1.5); }

Media queries and custom properties

A layout that changes at a breakpoint, or a CSS variable updated at runtime (a theme switch), both trigger transitions on the affected properties.

:root { --brand: #2563eb; }
.chip { background: var(--brand); transition: background 0.6s ease; }
/* Updating --brand in JS animates every .chip */

Practical Patterns

The lift-and-glow button

.btn-elevate {
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-elevate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

The growing underline nav link

.nav-link { position: relative; text-decoration: none; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: #2563eb;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

Transitioning "to display: none"

Because display isn't animatable in the classic model, fade panels with opacity plus visibility, delaying visibility so it flips only after the fade:

.panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.panel.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease; /* visibility flips immediately on the way in */
}

Performance & Accessibility

/* Prefer scaling with transform over animating width/height */
.grow { transition: transform 0.3s; }
.grow:hover { transform: scale(1.5); }

The will-change hint can pre-promote an element to its own layer, but overuse wastes memory — apply it only to elements that truly animate, and remove it when idle.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

Hands-on Exercise

.btn {
  background: #2563eb; color: #fff; padding: 0.7rem 1.4rem;
  border: none; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transition: background-color 0.3s ease, transform 0.2s ease,
              box-shadow 0.2s ease;
}
.btn:hover { background: #1e40af; transform: translateY(-2px);
             box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.btn:focus-visible { outline: none;
             box-shadow: 0 0 0 3px rgba(37,99,235,.5); }

.card { border-radius: 10px; overflow: hidden;
        box-shadow: 0 3px 10px rgba(0,0,0,.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-6px);
              box-shadow: 0 16px 30px rgba(0,0,0,.2); }
.card__img { transition: transform 0.5s ease-out; }
.card:hover .card__img { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

Summary & Quiz

📚 Further Reading

• MDN — Using CSS transitions
• MDN — transition-timing-function
• cubic-bezier.com — build custom curves
• web.dev — Animations & performance guide

🚀 What's Next?

Transitions animate between two states, but the states themselves come from the transform property — translate, scale, rotate, and their 3D cousins. Next we dive into 2D and 3D transforms so you have rich end-states worth transitioning to.