Chapter 3.2☕ 14 min read

Transitions

Smooth animations between CSS property changes. Transitions make UI feel polished and professional.

01Understanding Transitions

CSS transitions allow you to animate changes between CSS property values smoothly. Instead of instant changes, you can control the speed and timing.

🍵

Analogy: Just like pouring chai smoothly from height creates a perfect pour, CSS transitions create smooth visual changes instead of abrupt jumps.

.button {
  background-color: #f97316;
  transition: background-color 0.3s ease;
}
.button:hover { background-color: #ea580c; }

02Transition Properties

Four properties control transitions:

PropertyDescription

transition-propertyWhich CSS property to animate (e.g., all, background-color, transform)

transition-durationHow long the animation takes (e.g., 0.3s, 300ms)

transition-timing-functionThe speed curve (ease, linear, ease-in, ease-out, custom)

transition-delayDelay before animation starts (e.g., 0.1s, 200ms)

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

/* Multiple properties */
.card { transition: transform 0.2s ease, box-shadow 0.3s ease; }

/* All animatable properties */
.el { transition: all 0.3s ease; }

03Transition Timing Functions

Timing functions control the speed curve of the transition:

FunctionBehavior

linearConstant speed from start to end. Mechanical feel.

easeSlow start, fast middle, slow end. Default. Natural feel.

ease-inSlow start, then accelerate. Element leaving.

ease-outFast start, then decelerate. Element arriving.

ease-in-outSlow both ends. Smooth, natural motion.

cubic-bezier(n,n,n,n)Custom curve. Full control over the animation speed.

04Practical Examples

Common UI transition patterns:

/* Button hover — color change */
.btn { transition: all 0.2s ease; }
.btn:hover { background-color: #f97316; }

/* Card lift — translates up slightly */
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

/* Menu fade */
.menu { transition: opacity 0.3s ease; }
.menu.hidden { opacity: 0; pointer-events: none; }

/* Staggered children — delay increases */
.child:nth-child(1) { transition-delay: 0s; }
.child:nth-child(2) { transition-delay: 0.1s; }
.child:nth-child(3) { transition-delay: 0.2s; }

05Exercise — Transitions

Practice transitions below.

Try these experiments:

Add transition: all 0.3s ease to a box and change its color on hover Use transition: transform 0.2s ease and transform: scale(1.05) on hover Compare ease-out vs ease-in — feel the difference Add transition-delay: 0.2s — notice the pause before animation Transition TWO properties: background-color 0.3s ease, transform 0.5s ease

Done — Key Points:

✅ Four properties: property, duration, timing-function, delay.
✅ ease = natural feel. ease-out = element arriving. ease-in = element leaving.
✅ Shorthand: transition: property duration timing delay.
✅ Not all properties are animatable — check MDN. Transform and opacity are best for performance.
✅ Multiple properties: transition: transform 0.3s, opacity 0.2s.

Previous3.1 — Shadows & Border Effects 📋 All Chapters Next Chapter3.3 — Transforms →