🔖 অ্যানিমেশন ও ট্রানজিশন (Animations & Transitions)

আধুনিক ওয়েবসাইটে ইউজার এক্সপেরিয়েন্স (UX) ভালো করার জন্য অ্যানিমেশনের বিকল্প নেই। তবে অ্যানিমেশন সবসময় সূক্ষ্ম (Subtle) হওয়া উচিত, বিরক্তি উৎপাদনকারী নয়!

📌 CSS ট্রানজিশন (Transitions)

ট্রানজিশন ব্যবহার করে একটি অবস্থা (State) থেকে অন্য অবস্থায় পরিবর্তনকে স্মুথ (Smooth) করা যায়। সাধারণত :hover, :focus এগুলোর সাথে এটি ব্যবহৃত হয়।

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  /* এখানে ট্রানজিশন সেট করা হলো */
  transition: background-color 0.3s ease-in-out, transform 0.2s;
}
 
.btn:hover {
  background-color: darkblue; /* ০.৩ সেকেন্ড সময় নিয়ে বদলাবে */
  transform: scale(1.1);      /* ০.২ সেকেন্ডে একটু বড় হবে */
}

📌 🥷 নিঞ্জা টেকনিক: transform বনাম margin

আপনি যদি কোনো এলিমেন্টকে ডানদিকে সরাতে চান বা বড় করতে চান, কখনোই margin বা width/height অ্যানিমেট করবেন না! ❌

কেন? margin পরিবর্তন করলে ব্রাউজারকে পুরো পেজের লেআউট নতুন করে হিসাব (Reflow/Repaint) করতে হয়, যা ব্রাউজারকে স্লো করে দেয় এবং অ্যানিমেশন ল্যাগ করে।

নিঞ্জা সলিউশন: সবসময় transform প্রপার্টি (translate, scale, rotate) ব্যবহার করুন। এটি সরাসরি জিপিইউ (GPU) দিয়ে রেন্ডার হয়, তাই অ্যানিমেশন হয় মাখনের মতো স্মুথ! 🧈✨

/* ❌ খারাপ প্র্যাকটিস (ল্যাগ করবে) */
.box:hover {
  margin-top: -10px;
}
 
/* ✅ নিঞ্জা প্র্যাকটিস (স্মুথ হবে) */
.box:hover {
  transform: translateY(-10px);
}

📌 Keyframe অ্যানিমেশন (Advanced)

যখন কোনো কন্টিনিউয়াস বা জটিল অ্যানিমেশন দরকার হয় (যেমন লোডার বা স্পিনার), তখন @keyframes ব্যবহার করতে হয়।

/* ১. অ্যানিমেশন ডিফাইন করা */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 
/* ২. এলিমেন্টে অ্যাপ্লাই করা */
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid lightgray;
  border-top: 5px solid blue;
  border-radius: 50%;
  
  /* spin অ্যানিমেশনটি ১ সেকেন্ড ধরে আনলিমিটেড ঘুরবে */
  animation: spin 1s linear infinite; 
}