ट्रांज़िशन

सीएसएस पॉडकास्ट - 044: ट्रांज़िशन

किसी वेबसाइट से इंटरैक्ट करते समय, आपको कई एलिमेंट में स्थिति दिख सकती है. उदाहरण के लिए, ड्रॉपडाउन 'खुली या बंद' स्थिति में हो सकते हैं. फ़ोकस किए जाने या कर्सर घुमाने पर, बटन का रंग बदल सकता है. मोडल दिखते और गायब हो जाते हैं.

डिफ़ॉल्ट रूप से, सीएसएस इन स्थितियों की शैली तुरंत बदल देती है.

सीएसएस ट्रांज़िशन का इस्तेमाल करके, हम एलिमेंट की शुरुआती स्थिति और टारगेट की गई स्थिति के बीच अंतर बता सकते हैं. इन दोनों के बीच ट्रांज़िशन होने से, उपयोगकर्ता को बेहतर अनुभव मिलता है. जैसे, विज़ुअल दिशा-निर्देश, सहायता देना, और इंटरैक्शन की वजह और असर के बारे में संकेत देना.

ट्रांज़िशन प्रॉपर्टी

सीएसएस में ट्रांज़िशन का इस्तेमाल करने के लिए, अलग-अलग ट्रांज़िशन प्रॉपर्टी या transition शॉर्टहैंड प्रॉपर्टी का इस्तेमाल किया जा सकता है.

ट्रांज़िशन-प्रॉपर्टी

transition-property प्रॉपर्टी से पता चलता है कि किस(किन) स्टाइल का ट्रांज़िशन करना है.

.my-element {
  transition-property: background-color;
}

transition-property, कॉमा लगाकर अलग की गई सूची में एक या उससे ज़्यादा सीएसएस प्रॉपर्टी के नाम स्वीकार करता है.

इसके अलावा, transition-property: all का इस्तेमाल करके यह बताया जा सकता है कि हर प्रॉपर्टी का ट्रांज़िशन होना चाहिए.

transition-duration

transition-duration प्रॉपर्टी का इस्तेमाल करके, यह बताया जाता है कि ट्रांज़िशन पूरा होने में कितना समय लगेगा.

transition-duration समय की इकाइयों को सेकंड (s) या मिलीसेकंड (ms) में स्वीकार करता है. यह डिफ़ॉल्ट रूप से 0s पर सेट होता है.

transition-timing-function

transition-duration के दौरान सीएसएस ट्रांज़िशन की स्पीड बदलने के लिए, transition-timing-function प्रॉपर्टी का इस्तेमाल करें.

डिफ़ॉल्ट रूप से, सीएसएस आपके एलिमेंट को एक ही स्पीड (transition-timing-function: linear) पर ट्रांज़िशन करेगा. लीनियर ट्रांज़िशन कुछ हद तक नकली लग सकते हैं. हालांकि, असल ज़िंदगी में ऑब्जेक्ट का वज़न होता है और ये तुरंत बंद और शुरू नहीं हो सकते. ट्रांज़िशन में सहज होने या उससे बाहर निकलने से, आपके ट्रांज़िशन ज़्यादा दिलचस्प और स्वाभाविक बन सकते हैं.

हमारे सीएसएस ऐनिमेशन पर मॉड्यूल में टाइमिंग फ़ंक्शन की खास जानकारी दी गई है.

रीयल-टाइम में अलग-अलग टाइम फ़ंक्शन के साथ एक्सपेरिमेंट करने के लिए, DevTools का इस्तेमाल किया जा सकता है.

ट्रांज़िशन में देरी

ट्रांज़िशन शुरू होने का समय बताने के लिए, transition-delay प्रॉपर्टी का इस्तेमाल करें. अगर transition-duration तय नहीं किया गया है, तो ट्रांज़िशन तुरंत शुरू हो जाएंगे, क्योंकि डिफ़ॉल्ट वैल्यू 0s है. इस प्रॉपर्टी में समय की इकाई तय की जाती है, जैसे कि सेकंड (s) या मिलीसेकंड (ms).

यह प्रॉपर्टी, ट्रांज़िशन को चौंका देने वाले ट्रांज़िशन के लिए काम की है. इसके लिए, ग्रुप में हर एक एलिमेंट के लिए लंबा transition-delay सेट किया जाता है.

transition-delay की मदद से, डीबग करने में भी मदद मिलती है. देरी को नेगेटिव वैल्यू पर सेट करने से, टाइमलाइन में ट्रांज़िशन शुरू हो सकता है.

शॉर्टहैंड: ट्रांज़िशन

ज़्यादातर सीएसएस प्रॉपर्टी की तरह, इसका शॉर्टहैंड वर्शन भी उपलब्ध है. transition में transition-property, transition-duration, transition-timing-function, और transition-delay शामिल हैं.

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

क्या ट्रांज़िशन किया जा सकता है और क्या नहीं?

सीएसएस लिखते समय, आपके पास यह तय करने का विकल्प होता है कि किन प्रॉपर्टी में ऐनिमेटेड ट्रांज़िशन होने चाहिए. ऐनिमेबल सीएसएस प्रॉपर्टी की यह एमडीएन सूची देखें.

सामान्य तौर पर, केवल उन तत्वों का संक्रमण करना संभव है, जिनमें "मध्य स्थिति" हो सकती है उनकी शुरुआती और आखिरी स्थिति के बीच अंतर होता है. उदाहरण के लिए, font-family के लिए ट्रांज़िशन जोड़ना मुमकिन नहीं है, क्योंकि यह नहीं पता कि "बीच की स्थिति" क्या है serif से monospace के बीच दिखना चाहिए. दूसरी ओर, font-size के लिए ट्रांज़िशन जोड़े जा सकते हैं, क्योंकि इसकी इकाई एक ऐसी लंबाई है जिसके बीच में इंटरपोलेट किया जा सकता है.

यहां कुछ सामान्य प्रॉपर्टी दी गई हैं, जिनका ट्रांज़िशन किया जा सकता है.

डेटा को बदलना

आम तौर पर, transform सीएसएस प्रॉपर्टी को ट्रांज़ैक्शन किया जाता है, क्योंकि यह जीपीयू से ट्रिगर की गई प्रॉपर्टी होती है. इसकी वजह से, अच्छे ऐनिमेशन का इस्तेमाल किया जाता है और बैटरी भी कम खर्च होती है. इस प्रॉपर्टी की मदद से, किसी एलिमेंट को अपने हिसाब से स्केल किया जा सकता है, घुमाया जा सकता है, उसका अनुवाद किया जा सकता है या उसे तिरछा किया जा सकता है.

हमारे फ़ंक्शन मॉड्यूल में, ट्रांसफ़ॉर्म के बारे में जानकारी देने वाला सेक्शन देखें.

रंग

इंटरैक्शन से पहले, उसके दौरान, और उसके बाद के रंग, स्थिति का बड़ा संकेत हो सकते हैं. उदाहरण के लिए, अगर किसी बटन पर कर्सर घुमाया जा रहा है, तो उसका रंग बदला जा सकता है. रंग में किए गए इस बदलाव से उपयोगकर्ता को यह राय मिल सकती है कि इस बटन पर क्लिक किया जा सकता है.

color, background-color, और border-color प्रॉपर्टी ऐसी कुछ जगहें हैं जहां रंग इस्तेमाल कर सकता है उन्हें इंटरैक्शन के बाद ही बदला जा सकता है.

रंग के बारे में हमारा मॉड्यूल देखें.

परछाई

शैडो को अक्सर उछाल में बदलाव करने के लिए बदला जाता है, जैसे कि उपयोगकर्ता के फ़ोकस से ऊंचाई में बदलाव को दिखाना.

शैडो पर हमारे मॉड्यूल को देखें.

फ़िल्टर

filter एक बेहतरीन सीएसएस प्रॉपर्टी है. इसकी मदद से, तुरंत ग्राफ़िक इफ़ेक्ट जोड़े जा सकते हैं. filter की अलग-अलग स्थितियों के बीच स्विच करने से कुछ बेहद शानदार नतीजे मिल सकते हैं.

फ़िल्टर के बारे में जानकारी देने वाला हमारा मॉड्यूल देखें.

ट्रांज़िशन ट्रिगर

आपकी सीएसएस में, स्थिति में बदलाव होना और एक ऐसा इवेंट शामिल होना चाहिए जो सीएसएस ट्रांज़िशन के चालू होने के लिए उस स्थिति को ट्रिगर करता हो. ऐसे ट्रिगर का एक सामान्य उदाहरण :hover स्यूडो-क्लास है. यह असली क्लास मैच होने लगती है. ऐसा तब होता है, जब उपयोगकर्ता अपने कर्सर की मदद से किसी एलिमेंट पर कर्सर घुमाता है.

नीचे कुछ pseudo-classs और इवेंट की सूची दी गई है, जो आपके एलिमेंट में स्थिति बदलावों को ट्रिगर कर सकते हैं.

• :hover: कर्सर, एलिमेंट के ऊपर होने पर मैच करता है.
• :focus: यह एलिमेंट के फ़ोकस में होने पर मैच करता है.
• :focus-within : यह तब मैच करता है, जब एलिमेंट या उसका कोई डिसेंडेंट, फ़ोकस्ड.
• :target: मौजूदा यूआरएल का फ़्रैगमेंट, एलिमेंट के आईडी से मैच होने पर मैच होता है.
• :active: यह एलिमेंट के चालू होने पर मैच करता है. आम तौर पर, ऐसा तब होता है, जब माउस को इस पर दबाया जाता है).
• JavaScript से class में बदलाव: जब किसी एलिमेंट का सीएसएस class, के ज़रिए बदलता है JavaScript, CSS, ज़रूरी शर्तें पूरी करने वाली उन प्रॉपर्टी का ट्रांज़िशन करेगा जिनमें बदलाव हुआ है.

एंट्री या एग्ज़िट के लिए अलग-अलग ट्रांज़िशन

होवर/फ़ोकस पर अलग-अलग transition प्रॉपर्टी सेट करने से, कुछ दिलचस्प इफ़ेक्ट बनाए जा सकते हैं.

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

सुलभता सुविधाओं से जुड़ी ज़रूरी बातें

सीएसएस ट्रांज़िशन सभी के लिए उपलब्ध नहीं हैं. कुछ लोगों को ट्रांज़िशन और ऐनिमेशन की वजह से, मोशन सिकनेस या परेशानी हो सकती है. हालांकि, अच्छी बात यह है कि सीएसएस में prefers-reduced-motion नाम की एक मीडिया सुविधा मौजूद है. यह सुविधा यह पता लगाती है कि क्या किसी व्यक्ति ने अपने डिवाइस से कम मोशन को प्राथमिकता दी है.

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

मीडिया के इस फ़ीचर के बारे में ज़्यादा जानने के लिए, हमारी ब्लॉग पोस्ट prefers-reduced-motion: कभी-कभी कम हलचल ज़्यादा होती है.

प्रदर्शन संबंधी विचार

सीएसएस ट्रांज़िशन के साथ काम करते समय, कुछ सीएसएस प्रॉपर्टी के लिए ट्रांज़िशन जोड़ने पर, आपको परफ़ॉर्मेंस से जुड़ी समस्याएं आ सकती हैं. उदाहरण के लिए, जब width या height जैसी प्रॉपर्टी बदलती हैं, तो वे कॉन्टेंट को पेज के बाकी हिस्से पर भेज देती हैं. इससे सीएसएस, ट्रांज़िशन के हर फ़्रेम के लिए, हर उस एलिमेंट की नई पोज़िशन का पता लगाता है जिस पर असर हुआ है. हमारा सुझाव है कि जहां भी हो सके वहां transform और opacity जैसी प्रॉपर्टी का इस्तेमाल करें.

इस विषय के बारे में ज़्यादा जानने के लिए, बेहतर परफ़ॉर्मेंस वाले सीएसएस ऐनिमेशन के बारे में जानकारी देने वाली हमारी गाइड देखें.

देखें कि आपको कितना समझ आया है

ट्रांज़िशन के बारे में अपनी जानकारी को परखें