सीएसएस का ऐनिमेशन वाला ग्रिड लेआउट

सीएसएस ग्रिड में, grid-template-columns और grid-template-rows प्रॉपर्टी की मदद से, लाइन के नाम तय किए जा सकते हैं. साथ ही, ग्रिड कॉलम और लाइनों के साइज़ को ट्रैक किया जा सकता है. इन प्रॉपर्टी के लिए इंटरपोलेशन की सुविधा का इस्तेमाल करने पर, ग्रिड लेआउट किसी ऐनिमेशन या ट्रांज़िशन के आधे हिस्से पर स्नैप करने के बजाय, स्टेटस के बीच आसानी से ट्रांज़िशन कर सकते हैं.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

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

#target {
 
opacity: 0.5;
 
transition: opacity ease-in-out 0.25s;
}

#target:hover {
 
opacity: 1;
}

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

उदाहरण के लिए:

  • क्या opacity को 0 से 1 पर ट्रांसफ़र किया जा रहा है? इसे न्यूमेरिकल इंटरपोलेशन कहते हैं.
  • क्या background-color को white से black पर ट्रांसफ़र किया जा रहा है? सोर्स और टारगेट रंगों के बीच फ़ेड करें.
  • क्या आपको width को ट्रांसफ़र करना है? संख्या के हिसाब से इंटरपोलेशन करें. साथ ही, ज़रूरत पड़ने पर इकाइयों को बदलें.

यही बात सीएसएस ऐनिमेशन पर भी लागू होती है. यहां ब्राउज़र, कीफ़्रेम के बीच वैल्यू इंटरपोलेशन करेगा.

grid-template-columns और grid-template-rows को ऐनिमेट करना

ग्रिड लेआउट, ऐनिमेशन या ट्रांज़िशन के आधे हिस्से पर स्नैप करने के बजाय, एक से दूसरे स्टेटस में आसानी से ट्रांज़िशन कर सकते हैं.

नीचे दिए गए डेमो में, एक ग्रिड में कई अवतार दिखाए गए हैं. जगह बचाने के लिए, अवतारों को एक-दूसरे के ऊपर लगाया जाता है. इसके लिए, grid-template-columns का इस्तेमाल करके हर कॉलम की चौड़ाई को सीमित किया जाता है. कर्सर घुमाने पर, हर कॉलम को ज़्यादा जगह मिलती है.

.avatars {
 
display: grid;
 
gap: 0.35em;

 
grid-auto-flow: column;
 
grid-template-columns: repeat(4, 2em);
 
transition: all ease-in-out 0.25s;
}

.avatars:hover {
 
grid-template-columns: repeat(4, 4em);
}

transition प्रॉपर्टी की मदद से, ग्रिड वैल्यू के बीच आसानी से इंटरपोल करता है.

यह असर उन ऐनिमेशन पर भी लागू होता है जो grid-template-columns या grid-template-rows वैल्यू बदलते हैं.