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

Bramus

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

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 মান পরিবর্তন করে।