📘 Lesson · Lesson 32

Transitions

What Transitions Do

Transitions make CSS changes happen SMOOTHLY over time instead of instantly. You met this briefly with hover effects: without a transition, a colour change on hover SNAPS instantly; with one, it fades gently over, say, 0.3 seconds. That gentle, professional feel on every good button, link, and card comes from transitions. They're the easiest way to add polish and life to a page — one line turns a jarring instant change into a smooth, satisfying one. This is where your CSS starts to feel genuinely professional.

The transition Property

.btn {
    background: #2563eb;
    transition: background 0.3s ease;
    /*          │          │    │
                property   time timing-function */
}
.btn:hover {
    background: #1e40af;    /* this change now fades over 0.3s */
}

Hover me (imagine a smooth fade)

The transition goes on the NORMAL state, not the hover state — this is the key point people get wrong. You define the transition on the element's base rule, and it applies to changes in BOTH directions (into hover AND back out). The three parts: property (what to animate, e.g. background), duration (how long, e.g. 0.3s), and timing function (the speed curve, e.g. ease). So transition: background 0.3s ease means "smoothly animate any background change over 0.3 seconds." Simple and powerful.

Timing Functions — the speed curve

Value	Feel
ease	Starts slow, speeds up, ends slow (default, natural)
linear	Constant speed throughout (mechanical)
ease-in	Starts slow, accelerates
ease-out	Starts fast, decelerates (great for UI)
ease-in-out	Slow start and slow end

The timing function controls HOW the animation progresses — its acceleration curve. ease (the default) feels natural for most things. linear moves at constant speed, which feels mechanical (good for spinners, less good for UI). ease-out is a favourite for interface elements — it starts quick and settles gently, which feels responsive. You don't need to overthink this early: ease or ease-out handle nearly everything. There's also advanced cubic-bezier() for custom curves, but the keywords cover most needs beautifully.

Multiple Properties and Delay

/* Transition SEVERAL properties, each listed with a comma: */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Or transition everything at once (convenient but less precise): */
.card { transition: all 0.3s ease; }

/* Add a delay before it starts: */
.tooltip { transition: opacity 0.3s ease 0.5s; }  /* waits 0.5s first */

You can transition multiple properties by separating them with commas, each with its own duration if you like. transition: all 0.3s ease is a convenient catch-all that animates every changing property — handy, though slightly less efficient and precise than naming specific properties. A fourth value adds a delay: transition: opacity 0.3s ease 0.5s waits half a second before starting, useful for tooltips that shouldn't appear the instant you hover. Between property, duration, timing, and delay, you have full control over how changes unfold.

Best Practices — smooth, not dizzying

Keep it quick: 0.2s–0.4s feels responsive. Anything over 0.5s starts to feel sluggish for UI interactions.
Transition specific properties when you can, rather than all — it's more efficient and predictable.
Animate cheap properties: transform and opacity are smooth and fast; animating width, height, or margin can be janky (more on this in the transforms chapter).
Don't overdo it: transitions should enhance, not distract. Subtle is professional; excessive movement is amateurish and can even cause discomfort.

The golden combo you'll use most: transition on the base state + a change on :hover. That pairing — smooth hover feedback on buttons, links, and cards — is the single most common transition use, and it instantly makes an interface feel alive and responsive.

Exam Corner

Q: What do transitions do? Make property changes happen smoothly over time instead of instantly.

Q: Which state do you put the transition on? The normal/base state (it applies to changes both into and out of hover).

Q: What are the three main parts of the transition property? Property, duration, and timing function.

Q: What does transition: all 0.3s ease do? Smoothly animates every changing property over 0.3 seconds.

Q: A good duration for UI transitions? Around 0.2s–0.4s.

Transitions क्या करते हैं

Transitions CSS बदलाव को तुरंत के बजाय समय के साथ SMOOTHLY होने देते हैं. यह आप hover effects के साथ संक्षेप में मिल चुके: transition के बिना, hover पर colour बदलाव तुरंत SNAP करता है; एक के साथ, यह मान लीजिए 0.3 सेकंड में कोमलता से fade होता है. हर अच्छे button, link, और card पर वह कोमल, professional feel transitions से आती है. यह page में polish और जान जोड़ने का सबसे आसान तरीका है — एक line एक झटके वाले तुरंत बदलाव को smooth, संतोषजनक बना देती है. यहीं से आपकी CSS सच में professional लगने लगती है.

transition Property

.btn {
    background: #2563eb;
    transition: background 0.3s ease;
    /*          │          │    │
                property   time timing-function */
}
.btn:hover {
    background: #1e40af;    /* yeh badlav ab 0.3s me fade hoga */
}

Hover me (smooth fade socho)

Transition NORMAL state पर जाता है, hover state पर नहीं — यही मुख्य बात है जो लोग गलत करते हैं. आप transition को element के base rule पर define करते हैं, और यह DONO दिशाओं में बदलाव पर लगता है (hover में AUR वापस बाहर). तीन हिस्से: property (क्या animate करना, जैसे background), duration (कितना लंबा, जैसे 0.3s), और timing function (speed curve, जैसे ease). तो transition: background 0.3s ease मतलब "किसी भी background बदलाव को 0.3 सेकंड में smoothly animate करो." सरल और ताकतवर.

Timing Functions — speed curve

Value	Feel
ease	धीरे शुरू, तेज़, धीरे अंत (default, natural)
linear	पूरे समय स्थिर speed (mechanical)
ease-in	धीरे शुरू, तेज़ होता
ease-out	तेज़ शुरू, धीमा होता (UI के लिए बढ़िया)
ease-in-out	धीमा शुरू और धीमा अंत

Timing function control करता है animation KAISE आगे बढ़ता है — उसका acceleration curve. ease (default) ज़्यादातर चीज़ों के लिए natural लगता है. linear स्थिर speed पर चलता है, जो mechanical लगता है (spinners के लिए अच्छा, UI के लिए कम). ease-out interface elements के लिए पसंदीदा है — यह तेज़ शुरू होकर कोमलता से बैठता है, जो responsive लगता है. शुरू में ज़्यादा मत सोचिए: ease या ease-out लगभग सब कुछ संभालते हैं. custom curves के लिए advanced cubic-bezier() भी है, पर keywords ज़्यादातर ज़रूरतें खूबसूरती से cover करते हैं.

कई Properties और Delay

/* KAI properties transition, har ek comma se: */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ya sab kuch ek saath (suvidhajanak par kam precise): */
.card { transition: all 0.3s ease; }

/* Shuru hone se pehle delay: */
.tooltip { transition: opacity 0.3s ease 0.5s; }  /* pehle 0.5s ruk़ta */

कई properties transition कर सकते हैं उन्हें commas से अलग करके, हर एक अपनी duration के साथ अगर चाहें. transition: all 0.3s ease एक suvidhajanak catch-all है जो हर बदलती property animate करता है — काम का, हालांकि specific properties नाम देने से थोड़ा कम efficient और precise. चौथी value delay जोड़ती है: transition: opacity 0.3s ease 0.5s शुरू होने से पहले आधा सेकंड रुकता है, tooltips के लिए काम का जो hover करते ही तुरंत नहीं आने चाहिए. property, duration, timing, और delay के बीच, आपके पास पूरा control है बदलाव कैसे unfold हों.

Best Practices — smooth, चक्करदार नहीं

तेज़ रखिए: 0.2s–0.4s responsive लगता है. 0.5s से ऊपर कुछ भी UI interactions के लिए सुस्त लगने लगता है.
जब हो सके specific properties transition कीजिए all के बजाय — ज़्यादा efficient और predictable.
सस्ती properties animate कीजिए: transform और opacity smooth और तेज़ हैं; width, height, या margin animate करना janky हो सकता है (transforms chapter में ज़्यादा).
ज़्यादा मत कीजिए: transitions enhance करें, distract नहीं. Subtle professional है; अत्यधिक movement amateurish है और असुविधा भी पैदा कर सकता है.

वह golden combo जो सबसे ज़्यादा use करेंगे: base state पर transition + :hover पर बदलाव. वह जोड़ी — buttons, links, और cards पर smooth hover feedback — सबसे common transition इस्तेमाल है, और यह interface को तुरंत जीवंत तथा responsive बना देता है.

Exam Corner

Q: Transitions क्या करते हैं? Property बदलाव को तुरंत के बजाय समय के साथ smoothly होने देते हैं.

Q: Transition किस state पर रखते हैं? Normal/base state पर (यह hover में और बाहर दोनों बदलावों पर लगता है).

Q: transition property के तीन मुख्य हिस्से? Property, duration, और timing function.

Q: transition: all 0.3s ease क्या करता है? हर बदलती property को 0.3 सेकंड में smoothly animate करता है.

Q: UI transitions के लिए अच्छी duration? लगभग 0.2s–0.4s.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.