Chapter 33: Transitions
Transitions
Transitions are what make your website feel alive, smooth, premium, and responsive to user interaction — without writing a single line of JavaScript.
In simple words:
A CSS transition tells the browser: “When this property changes (hover, focus, class added/removed, etc.), don’t jump instantly — smoothly animate it over a short period of time.”
That tiny 0.3-second slide, fade, scale, or color change is what separates “okay website” from “wow, this feels professional” website in 2026.
Let’s go very slowly, step-by-step — like I’m sitting next to you explaining every property and common trap.
1. The Four Core Properties of transition
Every transition is made of these four things (you can write them separately or as shorthand):
| Property | What it controls | Most common values (2026) | Default value |
|---|---|---|---|
| transition-property | Which CSS property to animate | all, background-color, transform, opacity, width, height… | all |
| transition-duration | How long the animation takes | 0.3s, 400ms, 0.25s | 0s (instant) |
| transition-timing-function | Speed curve (acceleration/deceleration) | ease (default), ease-in, ease-out, ease-in-out, linear, cubic-bezier(0.4, 0, 0.2, 1) | ease |
| transition-delay | How long to wait before starting | 0s, 0.1s, 200ms | 0s |
Shorthand (most people use this):
CSS
|
0 1 2 3 4 5 6 |
transition: property duration timing-function delay; |
Examples:
CSS
|
0 1 2 3 4 5 6 7 8 |
transition: all 0.3s ease; /* everything, 300ms, default easing */ transition: transform 0.4s ease-out 0.1s; /* only transform, 400ms, ease-out, 100ms delay */ transition: background-color 0.25s linear; /* only background, instant start */ |
2. Real Example – Let’s Build a Beautiful Button with Transitions
index.html
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transitions – Webliance</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Transitions in Action</h1> <p>Hover over buttons & cards — feel the smoothness</p> <!-- Button examples --> <div class="buttons"> <button class="btn basic">Basic Button</button> <button class="btn lift">Lift on Hover</button> <button class="btn scale">Scale + Shadow</button> <button class="btn color-shift">Color Shift</button> </div> <!-- Card with multiple transitions --> <div class="card"> <h2>Hover Me Card</h2> <p>Multiple properties transition together: transform, shadow, background</p> </div> </div> </body> </html> |
style.css (focus on transitions)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
/* Reset & base */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family: system-ui, sans-serif; background: #f8fafc; color: #1e293b; padding: 60px 20px; min-height: 100vh; } .container { max-width: 900px; margin: 0 auto; text-align: center; } h1 { margin-bottom: 2rem; color: #1d4ed8; } /* Base button style */ .btn { display: inline-block; padding: 1rem 2.5rem; margin: 1rem; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; /* ← the magic line */ } /* Different transition behaviors */ .basic { background: #3b82f6; color: white; } .basic:hover { background: #2563eb; } .lift { background: #10b981; color: white; } .lift:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(16,185,129,0.3); } .scale { background: #8b5cf6; color: white; } .scale:hover { transform: scale(1.08); box-shadow: 0 10px 25px rgba(139,92,246,0.25); } .color-shift { background: #f59e0b; color: white; transition: background-color 0.4s ease-in-out, transform 0.4s ease; } .color-shift:hover { background: #d97706; transform: scale(1.05); } /* Card with combined transitions */ .card { background: white; border-radius: 16px; padding: 3rem 2rem; margin: 4rem auto; max-width: 600px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.4s ease; cursor: pointer; } .card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.15); background-color: #f8fafc; } .card h2 { margin-bottom: 1rem; color: #1e40af; } |
What You Should Do Right Now
- Open with Live Server
- Hover over each button — notice different behaviors:
- Basic → only color change
- Lift → moves up + shadow grows
- Scale → enlarges slightly + shadow
- Color-shift → slower color fade + scale
- Hover the card → multiple properties animate together (transform + shadow + background)
- Try these quick changes:
- Change 0.3s to 0.8s → feel how slow motion changes mood
- Change ease to ease-in-out or cubic-bezier(0.68, -0.55, 0.265, 1.55) → bouncy feel
- Add transition-delay: 0.15s to .card → slight delay before lift
Quick Transitions Mastery Checklist (2026)
- Always use transition: all 0.3s ease or transition: property 0.25s–0.4s ease-in-out
- Prefer ease, ease-in-out, or custom cubic-bezier over linear
- Animate only what changes (transform, opacity, background-color) — better performance
- Use will-change: transform; on elements that animate often (optional, advanced)
- Keep durations 0.2s–0.5s — too slow feels sluggish, too fast feels jumpy
- Combine with :hover, :focus, :active, class toggles
How does it feel when you hover and see that smooth lift or scale? That little “wow” is exactly what makes users think: “This site feels modern.”
Next possible lessons — tell me what you want:
- “10 beautiful hover effects using transitions”
- “transition vs animation — when to use which”
- “smooth page transitions (with CSS only)”
- “performance tips for transitions on mobile”
- “combine transitions with custom properties”
You’ve just added life to your websites. Chai khatam? Fresh cup lao — let’s keep animating! 🚀 😄
