लोड हो रहा है...

CSS ट्रांज़िशन

बॉक्स शैडो ने शांत गहराई दी। ट्रांज़िशन शांत समय के साथ बदलाव देते हैं: बटन होवर पर बैकग्राउंड नरम करता है, कार्ड फोकस पर थोड़ा उठता है, लिंक रंग कूदने की जगह सरकता है। आप अब भी दो अवस्थाएँ लिखते हैं — ब्राउज़र आपके तय किए समय में उनके बीच इंटरपोलेट करता है।

ट्रांज़िशन क्या है

ट्रांज़िशन खुद से नया लुक नहीं बनाता। वह उस प्रॉपर्टी को देखता है जो पहले से बदल रही हो (अक्सर :hover, :focus-visible, या क्लास से) और उस बदलाव को एनिमेट करता है। बिना ट्रांज़िशन छलांग तुरंत है; साथ में छोटा, पढ़ने-योग्य सरकना मिलता है।

चार longhand हैं: transition-property, transition-duration, transition-timing-function, और transition-delay। रोज़ के काम में ज़्यादातर transition shorthand चलता है।

प्रॉपर्टी और अवधि

बताएँ क्या एनिमेट हो सकता है, और बदलाव कितना लंबा चले। अवधि समय होती है (0.2s, 200ms)। छोटा और उद्देश्यपूर्ण नाटकीय इंतज़ार से बेहतर है — UI फीडबैक अक्सर 150ms–300ms के आसपास अच्छा लगता है।

होवर पर नरम बटन बैकग्राउंड

css

.btn {
background: #2563eb;
color: #fff;
border: none;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
transition-property: background-color, color;
transition-duration: 0.2s;
}

.btn:hover {
background: #1d4ed8;
color: #f8fafc;
}

ट्रांज़िशन बेस नियम पर रखें ताकि होवर में आना और निकलना दोनों एनिमेट हों। सिर्फ वही प्रॉपर्टी सूचीबद्ध करें जो मतलब हैं — वरना अनचाहे लेआउट जंप आधा सेकंड सरक सकते हैं।

टाइमिंग और डिले

transition-timing-function गति वक्र बनाता है: ease (डिफ़ॉल्ट अहसास), linear, ease-in, ease-out, ease-in-out, या कस्टम cubic-bezier(...)। transition-delay शुरू होने से पहले रुकता है — स्टैगर्ड मेनू के लिए उपयोगी, एक अकेले बटन पर आसानी से ज़्यादा हो जाता है।

opacity पर ease-out बनाम linear

css

.fade-panel {
opacity: 0.65;
transition: opacity 0.35s ease-out;
}

.fade-panel.is-bright {
opacity: 1;
}

.meter-bar {
width: 40%;
transition: width 0.4s linear;
}

.meter-bar.is-full {
width: 100%;
}

UI दिखने पर अक्सर ease-out स्वाभाविक लगता है। Linear उस प्रगति के लिए ठीक है जो समान पढ़नी चाहिए। डिले जानबूझकर सीक्वेंस के लिए रखें — हर क्लिक को देर से महसूस कराने के लिए नहीं।

शॉर्टहैंड और बहु-प्रॉपर्टी मोशन

शॉर्टहैंड में आमतौर पर क्रम: प्रॉपर्टी, अवधि, timing-function, delay। कई ट्रांज़िशन कॉमा से अलग करें। पेंट-फ्रेंडली प्रॉपर्टी चुनें — transform और opacity आमतौर पर width, height, top, या margin एनिमेट करने से चिकने होते हैं।

transform और शैडो से होवर लिफ्ट

css

.card-lift {
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.card-lift:hover,
.card-lift:focus-visible {
transform: translateY(-0.25rem);
box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.14);
}

यहाँ पिछले पाठ की गहराई मोशन से मिलती है: शैडो और लिफ्ट एक होवर क्षण साझा करते हैं। यात्रा छोटी रखें ताकि पेज ठोस लगे।

कम मोशन, और कब एनिमेशन चुनें

कुछ लोग कम गति चाहते हैं। prefers-reduced-motion: reduce का सम्मान करें — गैर-ज़रूरी ट्रांज़िशन छोटा या बंद करें। ट्रांज़िशन A → B स्टेट बदलाव के लिए चमकते हैं। लूप या बहु-चरण कहानियाँ CSS Animations (@keyframes) का क्षेत्र हैं — Transforms के बाद।

खुद आज़माएँ

बटन पर 0.2s बैकग्राउंड ट्रांज़िशन जोड़ें और होवर करें — फिर transition को :hover से बेस नियम पर ले जाएँ और होवर छोड़ने की तुलना करें।
पैनल क्लास टॉगल पर opacity को ease-out से एनिमेट करें; linear आज़माएँ और अहसास नोट करें।
कार्ड होवर पर transform: translateY(...) को नरम box-shadow से जोड़ें (दो प्रॉपर्टी, एक शॉर्टहैंड सूची)।
DevTools में prefers-reduced-motion: reduce एमुलेट करें और जाँचें कि गैर-ज़रूरी मोशन कम हो।
इस अभ्यास में खुले मेनू के लिए height एनिमेट करने से बचें — वह पैटर्न बाद में।

आम गलतियाँ

transition: all 1s लिखना ताकि हर प्रॉपर्टी, लेआउट सहित, पूरा सेकंड सरके
कई-सेकंड अवधि जो UI को सुस्त महसूस कराए
जब transform या opacity काफी हों तब width / top / margin एनिमेट करना
prefers-reduced-motion अनदेखा करना
ट्रांज़िशन से अनंत लूप की उम्मीद — वह एनिमेशन का इलाका है

सारांश

ट्रांज़िशन दो अवस्थाओं के बीच प्रॉपर्टी बदलाव को अवधि भर नरम करते हैं
प्रॉपर्टी, अवधि, timing-function और delay नियंत्रित करें (या transition shorthand)
पेंट-फ्रेंडली प्रॉपर्टी पर छोटा मोशन; ट्रांज़िशन बेस नियम पर
reduced-motion का सम्मान; लूप और जटिल सीक्वेंस के लिए keyframes
Effects & Motion में अगला: Transforms

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा