CSS transitions কীভাবে কাজ করে?

Question

Accepted Answer

একটি **transition** একটি সম্পত্তিকে তার পুরানো মূল্য থেকে নতুন মূল্যে সময়ের সাথে সাথে মসৃণভাবে অ্যানিমেট করে, তাৎক্ষণিকভাবে পরিবর্তনের পরিবর্তে। আপনি *কী* অ্যানিমেট করতে চান এবং *কতক্ষণ* তা ঘোষণা করেন, তারপর সম্পত্তি পরিবর্তন করে এটি ট্রিগার করেন (প্রায়শই `:hover` বা একটি ক্লাসের মাধ্যমে)।

```css
.button {
  background: blue;
  transition: background 0.3s ease;  /* animate background over 300ms */
}
.button:hover {
  background: darkblue;  /* on hover, it fades smoothly instead of snapping */
}
```

## shorthand এর চারটি অংশ

```css
transition: background 0.3s ease 0s;
/*          │          │    │    └── delay before starting */
/*          │          │    └─────── timing function (the easing curve) */
/*          │          └──────────── duration */
/*          └─────────────────────── property to animate (or `all`) */
```

## একাধিক সম্পত্তি অ্যানিমেট করা

```css
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);          /* lifts up */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
```

প্রতিটি সম্পত্তি তালিকাভুক্ত করুন (কমা দ্বারা পৃথক) `all` ব্যবহার করার পরিবর্তে, যা অপ্রত্যাশিতভাবে এমন জিনিসগুলি অ্যানিমেট করতে পারে যা আপনি উদ্দেশ্য করেননি এবং কর্মক্ষমতা ক্ষতি করতে পারে।

## Timing functions

```css
transition-timing-function: ease;        /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
```

## কর্মক্ষমতা: transform/opacity অ্যানিমেট করুন

```css
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
```

`transform` এবং `opacity` অ্যানিমেট করা পছন্দ করুন; সেগুলি কম্পোজিটর দ্বারা পরিচালিত হয় লেআউট পুনরায় চালানো ছাড়াই, তাই তারা মসৃণ থাকে (60fps)।

## অ্যাক্সেসিবিলিটি

```css
@media (prefers-reduced-motion: reduce) {
  * { transition: none; } /* respect users who get motion sickness */
}
```

## এটি কেন গুরুত্বপূর্ণ

Transitions পালিশ যোগ করে যা UI কে প্রতিক্রিয়াশীল এবং প্রাণবন্ত মনে করায় (hover প্রভাব, মসৃণ অবস্থার পরিবর্তন) মাত্র একটি লাইনে।

`transform`/`opacity` অ্যানিমেট করার সময় জানা — এবং `prefers-reduced-motion` সম্মান করা — এটি যা মসৃণ, অ্যাক্সেসযোগ্য গতি থেকে janky অ্যানিমেশন আলাদা করে।