Transitions & Animations

ট্রানজিশন ও অ্যানিমেশন

Read: ~24 min Intermediate 5 practice problems Live preview runner

1. Motion That Feels Intentional, Not Gimmicky

A button that gently darkens on hover, a menu that slides open instead of snapping into view — small touches of motion make an interface feel alive and responsive to the user's actions. CSS gives you two complementary tools for this: transitions, which smooth out a change between two states, and animations, which can run automatically, repeat, and move through many steps.

hover করলে ধীরে ধীরে গাঢ় হয়ে যাওয়া একটি বাটন, হঠাৎ না দেখিয়ে স্লাইড করে খোলা একটি মেনু — ছোট ছোট মুভমেন্ট একটি ইন্টারফেসকে জীবন্ত এবং ব্যবহারকারীর কাজের প্রতি সাড়া দেওয়া মনে করায়। CSS এর জন্য দুটি পরিপূরক টুল দেয় — transition, যা দুটি স্টেটের মধ্যে পরিবর্তনকে মসৃণ করে, আর animation, যা স্বয়ংক্রিয়ভাবে চলতে পারে, পুনরাবৃত্তি করতে পারে এবং একাধিক ধাপের মধ্য দিয়ে যেতে পারে।

Core insight: for animating position or size, use transform instead of top/left — the browser can render it far more efficiently.

মূল বিষয়: অ্যানিমেশনের জন্য top/left-এর বদলে transform ব্যবহার করলে ব্রাউজার তা অনেক বেশি efficient-ভাবে render করতে পারে।

2. The transition Property — Duration & Easing

transition tells the browser to smoothly animate a property's change instead of jumping to the new value instantly. The shorthand takes a property name, a duration, and an easing (timing) function: transition: background-color 0.3s ease;. Common easing keywords are ease (default, gentle start and end), linear (constant speed), and ease-in-out (slow start and end, faster middle). Use transition: all 0.3s ease; sparingly — naming exact properties is more predictable and often better for performance.

transition ব্রাউজারকে বলে দেয় যে একটি প্রপার্টির পরিবর্তন সাথে সাথে না ঘটিয়ে মসৃণভাবে অ্যানিমেট করতে হবে। শর্টহ্যান্ডে একটি প্রপার্টির নাম, একটি duration, আর একটি easing (timing) ফাংশন থাকে: transition: background-color 0.3s ease;। সাধারণ easing কিওয়ার্ড হলো ease (ডিফল্ট, হালকা শুরু ও শেষ), linear (স্থির গতি), এবং ease-in-out (ধীর শুরু ও শেষ, মাঝে দ্রুত)। transition: all 0.3s ease; কম ব্যবহার করুন — নির্দিষ্ট প্রপার্টির নাম দিলে তা বেশি প্রেডিক্টেবল এবং প্রায়ই performance-এর জন্য ভালো।

3. transform — translate, scale, rotate

transform moves, resizes, or rotates an element without affecting the layout of surrounding elements. translate(x, y) shifts it by an offset, scale(n) grows or shrinks it by a multiplier, and rotate(deg) spins it around its center. Multiple transforms can be combined in one declaration: transform: translateY(-4px) scale(1.05); both lifts and enlarges an element at once — a very common hover effect for cards and buttons.

transform আশেপাশের এলিমেন্টের লেআউট প্রভাবিত না করেই একটি এলিমেন্টকে সরায়, আকার বদলায়, বা ঘোরায়। translate(x, y) একটি offset দিয়ে সরায়, scale(n) একটি multiplier দিয়ে বড়-ছোট করে, আর rotate(deg) এর কেন্দ্রের চারপাশে ঘোরায়। একাধিক transform এক declaration-এ একসাথে ব্যবহার করা যায়: transform: translateY(-4px) scale(1.05); একসাথে একটি এলিমেন্টকে ওপরে তোলে ও বড় করে — card ও বাটনের জন্য এটি একটি খুবই সাধারণ hover effect।

hover-transform.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hover Transform</title></head>
<body>
  <div class="card">Hover over me</div>
  <p>Move your mouse over the card inside the preview above.</p>
</body>
</html>

style.css

body {
  font-family: sans-serif;
  padding: 20px;
}
.card {
  display: inline-block;
  padding: 20px 30px;
  background: #e6f4e8;
  border: 2px solid #39b549;
  border-radius: 8px;
  font-weight: bold;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

Remember to actually hover your mouse inside the rendered preview iframe above — the lift-and-grow effect only appears on hover, it won't show in a static screenshot. প্রিভিউ iframe-এর ভেতরে মাউস hover করে দেখুন।

4. @keyframes & animation — Automatic, Repeating Motion

transition only reacts to a state change like :hover. For motion that plays on its own — a pulsing badge, a bouncing icon, a loading spinner — use @keyframes to define a named sequence of steps (using percentages like 0%, 50%, 100%), then attach it to an element with the animation property, specifying duration, timing, and whether it repeats with infinite.

transition কেবল :hover-এর মতো state পরিবর্তনে সাড়া দেয়। নিজে থেকেই চলা মুভমেন্টের জন্য — একটি পালস করা badge, একটি বাউন্স করা আইকন, একটি লোডিং স্পিনার — @keyframes ব্যবহার করে একটি নামযুক্ত ধাপের সিকোয়েন্স (0%, 50%, 100%-এর মতো শতাংশ ব্যবহার করে) সংজ্ঞায়িত করুন, তারপর animation প্রপার্টি দিয়ে একটি এলিমেন্টের সাথে জুড়ে দিন, duration, timing, এবং infinite দিয়ে পুনরাবৃত্তি হবে কিনা তা উল্লেখ করুন।

keyframes.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Pulsing Badge</title></head>
<body>
  <div class="badge">Live</div>
  <p>This badge pulses continuously without any hover or click.</p>
</body>
</html>

style.css

body {
  font-family: sans-serif;
  padding: 20px;
}
.badge {
  display: inline-block;
  padding: 8px 18px;
  background: #dc2626;
  color: white;
  font-weight: bold;
  border-radius: 999px;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%   { transform: scale(1);    opacity: 1;   }
  50%  { transform: scale(1.15); opacity: 0.75; }
  100% { transform: scale(1);    opacity: 1;   }
}

5. Hover Micro-Interactions

A "micro-interaction" is a tiny, purposeful animation tied to a single user action — a button that slightly grows, a link's underline that slides in, an icon that nudges sideways. The best ones are fast (150–300ms), subtle, and reversible: whatever changed on :hover should smoothly revert when the mouse leaves, which transition handles automatically as long as it's declared on the base rule, not only inside :hover.

একটি "micro-interaction" হলো একটি একক ব্যবহারকারী-কর্মের সাথে জড়িত ছোট্ট, উদ্দেশ্যপূর্ণ অ্যানিমেশন — সামান্য বড় হওয়া একটি বাটন, স্লাইড করে আসা একটি লিংকের underline, পাশে সরে যাওয়া একটি আইকন। সেরাগুলো দ্রুত (১৫০–৩০০ মিলিসেকেন্ড), সূক্ষ্ম, এবং বিপরীতমুখী — :hover-এ যা বদলেছে তা মাউস সরে গেলে মসৃণভাবে ফিরে আসা উচিত, যা transition স্বয়ংক্রিয়ভাবে সামলায়, যদি তা কেবল :hover-এর ভেতরে নয়, বেস নিয়মেও ঘোষিত থাকে।

Common mistake Declaring transition only inside :hover makes the change-in smooth but the change-out instant, because there's no transition rule active once the hover state ends. Always declare transition on the base selector.

transition শুধু :hover-এর ভেতরে ঘোষণা করলে ভেতরে আসাটা মসৃণ হয়, কিন্তু বেরিয়ে যাওয়াটা তাৎক্ষণিক হয়ে যায়, কারণ hover অবস্থা শেষ হলে কোনো transition নিয়ম সক্রিয় থাকে না। সবসময় বেস সিলেক্টরে transition ঘোষণা করুন।

6. Performance — transform vs top/left

Animating top, left, width, or height forces the browser to recalculate layout on every single frame, which is expensive and can cause visible jank. Animating transform (and opacity) instead can usually run on the GPU compositor thread, skipping layout and paint entirely — the same visual movement, at a fraction of the cost. As a rule of thumb: if you're animating position or size purely for visual effect, reach for transform first.

top, left, width, বা height অ্যানিমেট করলে ব্রাউজারকে প্রতিটি ফ্রেমে লেআউট আবার হিসাব করতে হয়, যা ব্যয়বহুল এবং দৃশ্যমান jank সৃষ্টি করতে পারে। এর বদলে transform (ও opacity) অ্যানিমেট করলে সাধারণত GPU compositor থ্রেডে চলতে পারে, layout ও paint সম্পূর্ণ এড়িয়ে যায় — একই ভিজুয়াল মুভমেন্ট, অনেক কম খরচে। সাধারণ নিয়ম: শুধু ভিজুয়াল প্রভাবের জন্য position বা size অ্যানিমেট করলে প্রথমে transform বেছে নিন।

Property	Meaning	বাংলায়
`transition: prop duration easing;`	Smooths a property change between two states.	দুটি স্টেটের মধ্যে একটি প্রপার্টির পরিবর্তনকে মসৃণ করে।
`transform: translate()`	Moves an element without affecting layout.	লেআউট প্রভাবিত না করেই একটি এলিমেন্টকে সরায়।
`transform: scale()`	Grows or shrinks an element by a multiplier.	একটি multiplier দিয়ে এলিমেন্টকে বড়-ছোট করে।
`transform: rotate()`	Rotates an element around its center.	এলিমেন্টকে তার কেন্দ্রের চারপাশে ঘোরায়।
`@keyframes name { ... }`	Defines a named animation sequence.	একটি নামযুক্ত অ্যানিমেশন সিকোয়েন্স সংজ্ঞায়িত করে।
`animation: name duration timing infinite;`	Attaches and configures a keyframe animation.	একটি keyframe অ্যানিমেশন জুড়ে দেয় ও কনফিগার করে।

7. Practice Problems

Try each problem yourself first, then open the answer and run it in the live preview — remember to hover inside the preview iframe where the problem involves :hover.

প্রথমে প্রতিটি সমস্যা নিজে সমাধান করার চেষ্টা করুন, তারপর উত্তর খুলে লাইভ প্রিভিউতে চালিয়ে দেখুন — :hover জড়িত সমস্যার ক্ষেত্রে প্রিভিউ iframe-এর ভেতরে hover করতে ভুলবেন না।

Make a button smoothly change background color over 0.3s when hovered.

hover করলে একটি বাটনের background color ০.৩ সেকেন্ডে মসৃণভাবে বদলাক — এভাবে CSS লিখুন।

✨ Show Answer (উত্তর দেখুন)

ans1.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Color Transition</title></head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

style.css

.btn {
  padding: 10px 20px;
  background: #39b549;
  color: white;
  border: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background: #1f6e2a;
}

Use transform: rotate() to spin an icon 180 degrees on hover, with a smooth transition.

transform: rotate() ব্যবহার করে hover করলে একটি আইকন ১৮০ ডিগ্রি ঘুরিয়ে দিন, মসৃণ transition সহ।
✨ Show Answer (উত্তর দেখুন)
ans2.html
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Rotate Icon</title></head>
<body>
  <div class="chevron">▼</div>
</body>
</html>
```
style.css
```
.chevron {
  display: inline-block;
  font-size: 2rem;
  transition: transform 0.3s ease;
}
.chevron:hover {
  transform: rotate(180deg);
}
```
In two sentences, explain why animating transform performs better than animating top and left.

দুই বাক্যে ব্যাখ্যা করুন, top ও left অ্যানিমেট করার চেয়ে transform অ্যানিমেট করা কেন ভালো পারফর্ম করে।

✨ Show Answer (উত্তর দেখুন)

Answer: Animating top/left forces the browser to recalculate layout and repaint on every frame. Animating transform can be handled on the GPU compositor thread without touching layout, so it runs more smoothly, especially on lower-powered devices.

top/left অ্যানিমেট করলে ব্রাউজারকে প্রতিটি ফ্রেমে লেআউট আবার হিসাব করতে ও repaint করতে হয়। transform অ্যানিমেট করলে তা লেআউট স্পর্শ না করেই GPU compositor থ্রেডে সামলানো যায়, তাই এটি বেশি মসৃণভাবে চলে, বিশেষ করে কম শক্তিশালী ডিভাইসে।
Write a @keyframes animation named bounce that moves an element up and down continuously, and apply it.

bounce নামে একটি @keyframes অ্যানিমেশন লিখুন যা একটি এলিমেন্টকে ক্রমাগত ওপরে-নিচে সরায়, এবং এটি প্রয়োগ করুন।
✨ Show Answer (উত্তর দেখুন)
ans4.html
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bounce</title></head>
<body>
  <div class="ball">●</div>
</body>
</html>
```
style.css
```
.ball {
  display: inline-block;
  font-size: 2.5rem;
  color: #39b549;
  animation: bounce 0.8s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
```
Explain the bug in this code and fix it: .card:hover { transition: transform 0.3s; transform: scale(1.1); }.

এই কোডের বাগটি ব্যাখ্যা করুন এবং ঠিক করুন: .card:hover { transition: transform 0.3s; transform: scale(1.1); }।
✨ Show Answer (উত্তর দেখুন)
Answer: The transition is declared only inside :hover, so the zoom-in is smooth but the return to normal size is instant once the mouse leaves. Move transition to the base .card rule so it applies in both directions.

transition কেবল :hover-এর ভেতরে ঘোষিত, তাই জুম-ইন মসৃণ হলেও মাউস সরে গেলে স্বাভাবিক আকারে ফেরাটা তাৎক্ষণিক হয়। transition-কে বেস .card নিয়মে সরিয়ে নিন, যাতে এটি দুই দিকেই প্রযোজ্য হয়।
ans5.html
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Fixed Transition</title></head>
<body>
  <div class="card">Hover me</div>
</body>
</html>
```
style.css
```
.card {
  display: inline-block;
  padding: 16px 24px;
  background: #e6f4e8;
  border: 2px solid #39b549;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.1);
}
```

Summary — Module 21

transition smooths a state change (like :hover) over a duration and easing curve, while @keyframes plus animation define motion that plays on its own and can repeat. Prefer animating transform and opacity over top/left/width/height for smoother, GPU-friendly performance.

transition একটি duration ও easing curve-এর মধ্য দিয়ে একটি state পরিবর্তন (যেমন :hover) মসৃণ করে, আর @keyframes ও animation এমন মুভমেন্ট সংজ্ঞায়িত করে যা নিজে থেকেই চলে ও পুনরাবৃত্তি হতে পারে। মসৃণ, GPU-বান্ধব পারফরম্যান্সের জন্য top/left/width/height-এর বদলে transform ও opacity অ্যানিমেট করা ভালো।

Next Module → CSS Architecture: Naming & Maintainability — বড় প্রজেক্টে CSS গোছানো ও রক্ষণাবেক্ষণযোগ্য রাখার কৌশল।

Previous: CSS Variables & Custom Properties Next: CSS Architecture: Naming & Maintainability