ट्रांज़िशन

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

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

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

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

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

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

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

transition-property प्रॉपर्टी से यह तय होता है कि किस स्टाइल(स्टाइल) को बदला जाना है.

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

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

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

ट्रांज़िशन की अवधि

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

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

ट्रांज़िशन-टाइमिंग फ़ंक्शन

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-class है. यह बदली हुई क्लास तब मैच करती है, जब उपयोगकर्ता अपने कर्सर के साथ किसी एलिमेंट पर कर्सर घुमाता है.

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

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

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

होवर/फ़ोकस पर अलग-अलग 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;
  }
}

इस मीडिया सुविधा के बारे में ज़्यादा जानकारी पाने के लिए, हमारी ब्लॉग पोस्ट ppres-reduced-motion: कभी-कभी कम मूवमेंट ज़्यादा करना ज़्यादा देखें.

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

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

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

आपने जो सीखा है उसकी जांच करें

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