Google I/O से जुड़े रहने के लिए धन्यवाद! मांग पर वीडियो देखें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

ट्रांज़िशन

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

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

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

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

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

Browser Support

Source

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

transition-property

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 का इस्तेमाल किया जा सकता है.

Chrome DevTools का विज़ुअल ट्रांज़िशन टाइमिंग एडिटर.

transition-delay

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

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

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

shorthand: transition

ज़्यादातर सीएसएस प्रॉपर्टी की तरह, इसका भी शॉर्टहैंड वर्शन होता है. 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;
}

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

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

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

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

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

डेटा को बदलना

Browser Support

Source

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

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

रंग

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

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

रंग से जुड़ा हमारा मॉड्यूल देखें.

परछाई

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

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

फ़िल्टर

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

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

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

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

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

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

ऑब्जेक्ट को सीन में शामिल करने या हटाने के लिए अलग-अलग ट्रांज़िशन

कर्सर घुमाने/फ़ोकस करने पर अलग-अलग 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: Sometimes less movement is more देखें.

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

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

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

देखें कि आपको क्या समझ आया

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

ट्रांज़िशन की कौनसी प्रॉपर्टी, आसानी से होने वाले बदलाव के बारे में बताती है?

transition-duration

फिर से कोशिश करें.

transition-easing

यह कोई असली सीएसएस प्रॉपर्टी नहीं है.

transition-cubic-bezier

यह कोई असली सीएसएस प्रॉपर्टी नहीं है.

transition-timing-function

सही!

animation-ease

यह कोई असली सीएसएस प्रॉपर्टी नहीं है.

transition-property: all का इस्तेमाल करना सबसे सही तरीका है

सही

फिर से कोशिश करें. all की वैल्यू देने पर, परफ़ॉर्मेंस से जुड़ी समस्याएं आ सकती हैं. साथ ही, अनचाहे ट्रांज़िशन भी हो सकते हैं.

गलत

सही. सबसे सही तरीका यह है कि हर प्रॉपर्टी के लिए अलग-अलग जानकारी दें. बेहतर कंट्रोल से परफ़ॉर्मेंस बेहतर होगी और नतीजों का अनुमान लगाना आसान होगा.

सभी प्रॉपर्टी को ट्रांज़िशन किया जा सकता है.

सही

फिर से कोशिश करें. font-family जैसी प्रॉपर्टी में बदलाव नहीं किया जा सकता.

गलत

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