CSS অ্যানিমেটেড গ্রিড লেআউট

Bramus

CSS গ্রিডে, grid-template-columns এবং grid-template-rows প্রপার্টি আপনাকে যথাক্রমে গ্রিড কলাম এবং সারির লাইনের নাম এবং ট্র্যাক সাইজিং নির্ধারণ করতে দেয়। এইসব প্রপার্টির জন্য ইন্টারপোলেশন সাপোর্ট করলে, অ্যানিমেশন বা ট্রানজিশনের মাঝপথে স্ন্যাপ করার পরিবর্তে গ্রিড লেআউট মসৃণভাবে এক স্টেট থেকে অন্য স্টেটে ট্রানজিশন করতে পারে।

Browser Support

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

CSS-এ ভ্যালু ইন্টারপোলেশন

CSS-এ আপনি transition প্রপার্টি ব্যবহার করে একটি ভ্যালু থেকে অন্য ভ্যালুতে প্রপার্টি মসৃণভাবে ট্রানজিশন করতে পারবেন।

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

#target:hover {
  opacity: 1;
}

রেন্ডারিং ইঞ্জিন অটোমেটিক টার্গেট করা প্রপার্টির ভ্যালুর ধরন শনাক্ত করবে এবং নতুন ভ্যালুতে মসৃণভাবে ট্রানজিশন করতে সেই তথ্য ব্যবহার করবে।

যেমন:

  • opacity-কে 0 থেকে 1-এ ট্রানজিশন করছেন? এটি হল নিউমেরিক্যাল ইন্টারপোলেশন।
  • background-color-কে white থেকে black-এ ট্রানজিশন করছেন? সোর্স ও টার্গেট রঙের মধ্যে ফেড করুন।
  • width-এ ট্রানজিশন করছেন? সংখ্যাগতভাবে ইন্টারপোলেট করুন, প্রয়োজন হলে ইউনিট কনভার্ট করুন।

CSS অ্যানিমেশনের ক্ষেত্রেও একই কথা প্রযোজ্য, যেখানে ব্রাউজার কীফ্রেমের মধ্যে ভ্যালু ইন্টারপোলেশন করবে।

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 ভ্যালু পরিবর্তন করে।