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

Bramus

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

Browser Support

  • 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 वैल्यू बदलने वाले ऐनिमेशन पर भी लागू होता है.