Transition — মসৃণ পরিবর্তন আর timing function

১ · মোশন কেন — আর কখন সেটি ক্ষতি করে

মোবাইল ব্যাংকিং অ্যাপে “Send Money” বোতামে আঙুল রাখলে বোতামটি একটু গাঢ় হয়। নতুন পাতা হঠাৎ হাজির হয় না, পাশ থেকে সরে আসে। টিভিতে ক্রিকেটের স্কোরবোর্ড এক ঝটকায় বদলায় না — নতুন রান গড়িয়ে এসে বসে। এই ছোট ছোট নড়াচড়াই ব্যবহারকারীকে বলে দেয়, “আপনার কাজ পৌঁছেছে, আর এই জিনিসটি এখানে বদলেছে।”

CSS-এ এর সবচেয়ে সহজ হাতিয়ার transition. সাধারণ নিয়মে কোনো property-র মান বদলালে — যেমন hover-এ বোতামের রং — ব্রাউজার সাথে সাথে নতুন মান এঁকে দেয়। transition দিলে ব্রাউজার নির্দিষ্ট সময় ধরে মাঝের মানগুলো এঁকে দেখায়, যেন পুরোনো রং ধীরে ধীরে নতুন রঙে গলে যাচ্ছে। মাঝের এই মান হিসাব করার নাম interpolation.

একই নড়াচড়া ক্ষতিও করে। প্রতিবার মেনু খুলতে এক সেকেন্ড অপেক্ষা করতে হলে কাজ ধীর লাগে। পাতার এক কোণে সারাক্ষণ কিছু নাচলে পড়ায় মন বসে না। আর সবচেয়ে গুরুতর ব্যাপারটি শরীরের।

নিয়মটি “অ্যানিমেশন বন্ধ” নয়, বরং “বড় নড়াচড়া কমাও।” রঙের হালকা বদল সাধারণত কারও ক্ষতি করে না; সরে যাওয়া, বড় হওয়া, ঘোরা — এগুলোই কমাতে হয়। এই ছাঁচটি মনে রাখুন:

.card {
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: box-shadow 250ms ease-out;   /* ছায়া বদলাক, সরে যাওয়া নয় */
  }
  .card:hover { transform: none; }
}

২ · transition-এর চারটি অংশ — কী, কতক্ষণ, কীভাবে, কখন

প্রথম যে কথাটি বোঝা দরকার: transition নিজে কোনো অবস্থা তৈরি করে না। “স্বাভাবিক অবস্থায় বোতাম সবুজ, hover-এ গাঢ় সবুজ” — এই দুই অবস্থা লেখে সাধারণ নিয়ম আর pseudo-class. transition শুধু বলে, এক অবস্থা থেকে আরেকটিতে যাওয়ার পথ কেমন হবে। ঢাকা থেকে চট্টগ্রাম — গন্তব্য আগেই ঠিক; transition ঠিক করে ট্রেনে যাবেন না বাসে, কতক্ষণে, আর কখন রওনা দেবেন।

ডিফল্ট duration 0s — তাই কিছু না লিখলে কোনো transition হয় না, মান সাথে সাথে বদলায়। আরেকটি বিষয় খেয়াল করুন: ব্রাউজার transition চালায় তখনই, যখন একটি element-এর computed মান বদলায় — hover, class যোগ, JavaScript দিয়ে style বদল, যেকোনো কারণে। ভেতরে ঠিক কী ঘটে, ধাপে ধাপে দেখুন:

1.btn {2  transform: translateY(0);3  transition: transform 300ms ease;4}5.btn:hover {6  transform: translateY(-8px);7}8/* JS: 'transitionend' ঘটনা */

এবার নিজে চালান। একটি “টাকা পাঠান” বোতাম — চারটি longhand আলাদা করে লেখা, যাতে প্রতিটির কাজ চোখে পড়ে। পাশে তুলনার জন্য transition ছাড়া একই বোতাম:

body { padding: 24px 12px; }
.btn {
  padding: 12px 22px; margin: 4px;
  font: 600 16px sans-serif; color: #fff;
  background-color: #0f766e;
  border: 0; border-radius: 8px; cursor: pointer;
  transition-property: background-color, transform;
  transition-duration: 200ms;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.btn:hover, .btn:focus-visible {
  background-color: #134e4a;
  transform: translateY(-3px);
}
.btn.none { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:focus-visible { transform: none; }
}

৩ · shorthand, একাধিক transition আর delay-এর কৌশল

চারটি longhand বারবার লেখা ক্লান্তিকর, তাই আছে shorthand transition. একটি property-র জন্য একটি “দল”, আর একাধিক property হলে কমা দিয়ে একাধিক দল:

/* property | duration | timing-function | delay */
.card {
  transition: transform 250ms ease-out,
              box-shadow 250ms ease-out 50ms;
}
/* একই কথা longhand-এ */
.card {
  transition-property: transform, box-shadow;
  transition-duration: 250ms, 250ms;
  transition-timing-function: ease-out, ease-out;
  transition-delay: 0s, 50ms;
}

তিনটি নিয়ম মনে রাখলেই shorthand পড়া সহজ:

• প্রথম সময়-মান duration, দ্বিতীয়টি delay. বাকি অংশের ক্রম যেকোনো হতে পারে, কিন্তু দুটি সময়ের ক্রম বদলায় না। transition: opacity 1s 300ms মানে এক সেকেন্ড ধরে, 300ms দেরিতে।
• shorthand সব longhand-কে নতুন করে বসায়। যা লেখেননি, তা ডিফল্টে ফেরে। তাই আগে transition-delay: 1s লিখে পরে transition: opacity 200ms লিখলে delay আবার 0s হয়ে যায় — cascade-এর সাধারণ নিয়ম।
• longhand-এর তালিকা ছোট-বড় হলে ছোটটি পুনরাবৃত্ত হয়। transition-property: transform, opacity, color আর transition-duration: 200ms থাকলে তিনটিই 200ms পায়।

transition: all 0.3s খুব প্রচলিত, কিন্তু এড়িয়ে চলুন। এক, যে property বদলাতে চাননি, সেটিও অ্যানিমেট হবে — পরে কেউ width বা padding বদলালে হঠাৎ পুরো লেআউট নড়তে শুরু করবে। দুই, ব্রাউজারকে প্রতিটি বদলানো property-র জন্য transition তৈরি করতে হয়, যা দামি হতে পারে। যা বদলাবে, শুধু তার নাম লিখুন।

এবার বাস্তবের সবচেয়ে প্রচলিত নকশা — একটি অনলাইন দোকানের পণ্য-কার্ড, hover-এ যা একটু ভেসে ওঠে। ছায়া একটু দেরিতে গাঢ় হয়, তাই মনে হয় কার্ডটি সত্যিই টেবিল থেকে উঠছে:

<style>
  body { font-family: sans-serif; background: #f1f5f9; padding: 16px; }
  .card {
    max-width: 260px; padding: 14px 16px; border-radius: 12px;
    background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
    transition: transform 250ms ease-out, box-shadow 250ms ease-out 50ms;
  }
  @media (hover: hover) {
    .card:hover { transform: translateY(-6px);
      box-shadow: 0 14px 24px rgb(0 0 0 / 0.18); }
  }
  .card:has(a:focus-visible) { transform: translateY(-6px);
    box-shadow: 0 14px 24px rgb(0 0 0 / 0.18); }
  @media (prefers-reduced-motion: reduce) {
    .card:hover, .card:has(a:focus-visible) { transform: none; }
  }
</style>
<article class="card">
  <h3>জামদানি শাড়ি</h3>
  <p>৳ ৮,৫০০ · ঢাকায় ফ্রি ডেলিভারি</p>
  <a href="#buy">কিনুন</a>
</article>

delay দিয়ে দুই দিকে দুই আচরণ

অংশ ২-এর নিয়মটি মনে করুন — ব্রাউজার নেয় নতুন অবস্থার transition. এতে একটি সুন্দর কৌশল সম্ভব। ড্রপডাউন মেনু থেকে মাউস এক মুহূর্তের জন্য পিছলে গেলেই মেনু বন্ধ হয়ে যাওয়া খুব বিরক্তিকর। সমাধান: খোলার সময় delay নেই, বন্ধের সময় একটু delay:

.submenu {
  opacity: 0; visibility: hidden;
  transition: opacity 150ms ease-in, visibility 0s linear 150ms;
  transition-delay: 300ms, 450ms;   /* বন্ধের আগে 300ms সুযোগ, fade শেষে লুকানো */
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu {
  opacity: 1; visibility: visible;
  transition-delay: 0s;             /* খুলবে সাথে সাথে */
}

hover-এ নতুন অবস্থা .nav-item:hover .submenu, যার delay 0s — মেনু সাথে সাথে খোলে। মাউস সরলে নতুন অবস্থা সাধারণ .submenu, যার delay 300ms — এই সময়ের মধ্যে মাউস ফিরে এলে মেনু বন্ধই হয় না। visibility এখানে একটি বিশেষ property: এটি discrete হলেও transition-এ এমনভাবে বদলায় যে পুরো সময় ধরে element দেখা যায়, আর লুকানো অবস্থায় সেটি ক্লিক বা Tab-ও পায় না। পরের অংশে এই “discrete” কথাটির পুরো মানে দেখবেন।

৪ · কোন property animate হয় — মাঝের মান, discrete আর display-এর পুরোনো সমস্যা

transition কাজ করে কেবল তখন, যখন ব্রাউজার দুই মানের মাঝামাঝি একটি মান হিসাব করতে পারে। 10px আর 20px-এর মাঝে 15px আছে; লাল আর নীলের মাঝে বেগুনি আছে। কিন্তু dashed আর solid বর্ডারের মাঝে “অর্ধেক dashed” বলে কিছু নেই; Arial আর Georgia-র মাঝেও কোনো ফন্ট নেই। প্রথম দলকে বলে interpolable, দ্বিতীয় দলকে discrete.

discrete property ডিফল্টে transition-এ যোগই দেয় না — মান সাথে সাথে বদলায়। নতুন property transition-behavior: allow-discrete বললে ব্রাউজার এদেরও transition-এ নেয়, তবে মাঝের মান তো নেই, তাই সময়ের ঠিক অর্ধেকে এক লাফে বদলায়। চোখে দেখুন:

<style>
  body { font-family: sans-serif; }
  .box {
    max-width: 280px; padding: 12px; margin: 8px 0; border-radius: 10px;
    background: #e0f2fe; border: 4px dashed #0369a1;
    transition: background-color 2s, border-style 2s;  /* শেখার জন্য ধীর */
  }
  .b2 { transition-behavior: allow-discrete; }
  #on:checked ~ .box { background-color: #fde68a; border-style: solid; }
  @media (prefers-reduced-motion: reduce) {
    .box { transition-duration: 0.01s; }
  }
</style>
<input type="checkbox" id="on"> <label for="on">অবস্থা বদলান</label>
<div class="box">সাধারণ: border-style সাথে সাথে বদলায়</div>
<div class="box b2">allow-discrete: border-style বদলায় ঠিক মাঝপথে</div>

display: none — বহু বছরের পুরোনো মাথাব্যথা

মেনু বা popup দেখানো-লুকানোর স্বাভাবিক উপায় display: none ↔ display: block. কিন্তু এখানে transition দুই দিক থেকেই আটকে যেত। দেখানোর সময়: display: none element-এর কোনো বাক্সই থাকে না, তার opacity কত ছিল — ব্রাউজারের কাছে কোনো “আগের মান” নেই, তাই শুরু করার জায়গাই নেই। লুকানোর সময়: display: none হওয়ামাত্র element উধাও; ধীরে মিলিয়ে যাওয়ার সুযোগই আসে না।

বহু বছর এর বিকল্প ছিল opacity: 0 + visibility: hidden + pointer-events: none-এর জোট, বা JavaScript-এ class যোগ করে setTimeout দিয়ে অপেক্ষা। এখন দুটি নতুন হাতিয়ার এই দুই দিকের সমস্যা মেটায়:

• allow-discrete + display: display-এর জন্য ব্রাউজার একটি বিশেষ নিয়ম মানে — লুকানোর সময় none হয় একেবারে শেষে, দেখানোর সময় block হয় একেবারে শুরুতে. তাই পুরো অ্যানিমেশনের সময় element দেখা যায়।
• @starting-style: “প্রথমবার আঁকার আগে ধরে নাও মান এই ছিল।” এতে দেখানোর সময় ব্রাউজার একটি আগের মান পায় — যেমন opacity: 0 — আর সেখান থেকে transition শুরু করে।

এবার পর্ব ১১-এর popover দিয়ে একটি মেনু, যা খোলার সময় ওপর থেকে নেমে ফুটে ওঠে, আর বন্ধের সময় মিলিয়ে যায়:

<style>
  body { font-family: sans-serif; min-height: 220px; }
  #menu {
    inset: auto; top: 52px; left: 12px; margin: 0; padding: 6px;
    border: 1px solid #94a3b8; border-radius: 10px;
    --shift: -8px; opacity: 0; transform: translateY(var(--shift));
    transition: opacity 200ms ease-out, transform 200ms ease-out;  /* পুরোনো ব্রাউজার */
    transition: opacity 200ms ease-out, transform 200ms ease-out,
      display 200ms allow-discrete, overlay 200ms allow-discrete;
  }
  #menu:popover-open { opacity: 1; transform: none; }
  @starting-style {
    #menu:popover-open { opacity: 0; transform: translateY(var(--shift)); }
  }
  #menu button { display: block; width: 100%; margin: 2px 0; padding: 6px 14px; }
  @media (prefers-reduced-motion: reduce) { #menu { --shift: 0px; } }
</style>
<button popovertarget="menu">মেনু ▾</button>
<div id="menu" popover>
  <button popovertarget="menu" popovertargetaction="hide">আমার অর্ডার</button>
  <button popovertarget="menu" popovertargetaction="hide">ঠিকানা বদলান</button>
</div>

সাপোর্টের সৎ চিত্র: @starting-style আর transition-behavior ২০২৪ সালে Chrome, Edge, Safari আর Firefox-এর নতুন সংস্করণে এসেছে — Baseline Newly available. কিন্তু overlay property — যা বন্ধের অ্যানিমেশন শেষ হওয়া পর্যন্ত popover বা dialog-কে top layer-এ ধরে রাখে — এখনো মূলত Chromium-এ; যেখানে নেই, সেখানে transition-এর তালিকায় অচেনা নামটি শুধু উপেক্ষিত হয়, ক্ষতি নেই। আর ব্রাউজারভেদে display-এর বন্ধের অ্যানিমেশনের খুঁটিনাটি একটু আলাদা হতে পারে, তাই অন্তত দুটি ইঞ্জিনে নিজে পরীক্ষা করুন।

height: auto — তিনটি পথ

accordion বা FAQ-এর উত্তর মসৃণভাবে খুলতে চাইলে সমস্যা auto: 0 আর auto-র মাঝামাঝি ব্রাউজার হিসাব করত না। পর্ব ৩৭-এ দেখেছেন interpolate-size: allow-keywords আর calc-size() — সবচেয়ে পরিষ্কার সমাধান, কিন্তু এখনো শুধু Chromium-এ, not yet Baseline. তাই আজকের বাস্তব পথ:

• সবখানে চলে: grid-এর সারি 0fr থেকে 1fr-এ transition — grid track-এর মাপ interpolable, আর এটি সব আধুনিক ব্রাউজারে কাজ করে।
• বাড়তি সুবিধা হিসেবে: তার ওপর interpolate-size, যাতে Chromium-এ সরাসরি height: auto.
• এড়িয়ে চলুন: max-height: 1000px-এর কৌশল — আসল উচ্চতা ছোট হলে অ্যানিমেশনের সময় ভুল হয়, অদ্ভুত দেরি দেখা যায়।

.answer-wrap {
  display: grid;
  grid-template-rows: 0fr;               /* বন্ধ */
  transition: grid-template-rows 300ms ease;
}
.faq.open .answer-wrap { grid-template-rows: 1fr; }   /* খোলা */
.answer-wrap > div { overflow: hidden; }  /* ভেতরের একটিমাত্র child */

৫ · Timing function — গতির চরিত্র: ease থেকে cubic-bezier()

একই 300ms, একই পথ — তবু একটি বোতাম “জীবন্ত” লাগে, আরেকটি “যন্ত্রের মতো।” পার্থক্য গড়ে timing function (easing). এটি একটি ছোট গাণিতিক যন্ত্র: ইনপুট “সময়ের কত অংশ গেছে” (0 থেকে 1), আউটপুট “পথের কত অংশ পেরিয়েছে” (সাধারণত 0 থেকে 1).

“ঢুকতে ease-out, বেরোতে ease-in” — এর পেছনের যুক্তি: নতুন জিনিস দ্রুত হাজির হলে ব্যবহারকারী সাথে সাথে সাড়া পান, আর শেষের ধীরগতি চোখকে তার থামার জায়গা দেখায়। বেরিয়ে যাওয়া জিনিসের থামার জায়গা দেখার দরকার নেই, তাই সেটি ধীরে শুরু করে দ্রুত চলে যায়।

সবগুলো keyword আসলে একটি সাধারণ যন্ত্রের রূপ — cubic-bezier(x1, y1, x2, y2). চারটি সংখ্যা মানে দুটি “টানার বিন্দু” (control point). বক্ররেখা শুরু হয় (0,0) থেকে, শেষ হয় (1,1)-এ, আর মাঝের দুটি বিন্দু তাকে নিজের দিকে টানে — চুম্বকের মতো, ছোঁয় না। ছকে আঁকা দেখুন:

এবার সবগুলো একসাথে দৌড়াতে দিন। ছয়টি বল, একই দূরত্ব, একই 2 সেকেন্ড — শুধু timing function আলাদা। ডানের পাতলা দাগটি শেষ-রেখা:

<style>
  body { font: 14px sans-serif; }
  .row { display: grid; grid-template-columns: 8.5em 1fr; align-items: center; gap: 8px; margin: 6px 0; }
  .track { container-type: inline-size; height: 26px; border-radius: 13px;
    background: linear-gradient(90deg, #f1f5f9 85%, #94a3b8 85% calc(85% + 2px), #f1f5f9 0); }
  .dot { width: 22px; height: 22px; margin: 2px; border-radius: 50%; background: #0f766e;
    transition: transform 2s var(--e); }
  #go:checked ~ .row .dot { transform: translateX(calc(85cqw - 24px)); }
  @media (prefers-reduced-motion: reduce) { .dot { transition-duration: 0.01s; } }
</style>
<input type="checkbox" id="go"> <label for="go">দৌড় শুরু / ফেরত</label>
<div class="row"><code>linear</code><div class="track"><div class="dot" style="--e: linear"></div></div></div>
<div class="row"><code>ease</code><div class="track"><div class="dot" style="--e: ease"></div></div></div>
<div class="row"><code>ease-in</code><div class="track"><div class="dot" style="--e: ease-in"></div></div></div>
<div class="row"><code>ease-out</code><div class="track"><div class="dot" style="--e: ease-out"></div></div></div>
<div class="row"><code>ease-in-out</code><div class="track"><div class="dot" style="--e: ease-in-out"></div></div></div>
<div class="row"><code>overshoot</code><div class="track"><div class="dot" style="--e: cubic-bezier(.34,1.56,.64,1)"></div></div></div>

নিজের বক্ররেখা হাতে বানাতে হবে না। Edge বা Chrome-এর DevTools-এ Styles প্যানেলে যেকোনো timing function-এর পাশে ছোট বাঁকা-রেখার আইকনে চাপলে একটি easing editor খোলে — বিন্দু টেনে দেখুন, সংখ্যা নিজেই বদলাবে। Firefox-এও একই রকম সুবিধা আছে (পর্ব ৪৭)।

৬ · steps() আর linear() — ধাপে ধাপে লাফ আর স্প্রিংয়ের দোল

কখনো মসৃণতা চাই না, চাই স্পষ্ট ধাপ — যেমন ঘড়ির কাঁটার টিক টিক, বা পুরোনো টাইপরাইটারে একটি একটি করে অক্ষর। এর জন্য steps(n, অবস্থান): পুরো পথকে n-টি সমান ধাপে ভাগ করে, প্রতিটি ধাপে এক লাফ। দ্বিতীয় অংশটি বলে লাফ কখন:

• jump-end বা end (ডিফল্ট) — প্রতিটি ধাপের শেষে লাফ; শুরুতে মান থাকে আগের জায়গায়।
• jump-start বা start — প্রতিটি ধাপের শুরুতেই লাফ; প্রথম মুহূর্তেই প্রথম ধাপ।
• jump-none — শুরু আর শেষ দুই মানই কিছুক্ষণ দেখা যায়; jump-both — দুই প্রান্তেই লাফ।

টাইপরাইটারের কৌশল সহজ: একটি monospace লেখার width 0 থেকে অক্ষর-সংখ্যার সমান ch-এ নিয়ে যান, আর ধাপ দিন অক্ষর-সংখ্যার সমান। ch একক হলো “0” অক্ষরের প্রস্থ (পর্ব ২০), আর monospace ফন্টে সব অক্ষরের প্রস্থ সমান:

<style>
  body { font-family: sans-serif; }
  .type {
    width: 0; overflow: hidden; white-space: nowrap;
    font: 22px/1.5 monospace; border-right: 2px solid #0f766e;
    transition: width 1.3s steps(13, end);
  }
  .smooth { transition-timing-function: linear; }
  #t:checked ~ .type { width: 13ch; }
  @media (prefers-reduced-motion: reduce) { .type { transition: none; } }
</style>
<input type="checkbox" id="t"> <label for="t">লিখুন / মুছুন</label>
<p class="type">Hello, Dhaka!</p>
<p class="type smooth">Hello, Dhaka!</p>

steps()-এর আরেকটি ক্লাসিক ব্যবহার sprite sheet: একটি ছবিতে পাশাপাশি ৮টি ফ্রেম আঁকা, যেমন একটি দৌড়ানো চরিত্র — সিনেমার ফিল্ম-রিলের মতো। background-position-কে steps(8) দিয়ে সরালে প্রতিবার ঠিক একটি করে ফ্রেম জানালায় আসে, মাঝখানে দুই ফ্রেমের আধাআধি কখনো দেখা যায় না। এটি সাধারণত বারবার চলা @keyframes animation-এ লাগে — পরের পর্বে।

linear() — যেকোনো আকারের গতি, স্প্রিংসহ

cubic-bezier()-এর একটি সীমা আছে: দুটি টানার বিন্দু দিয়ে একবারের বেশি দোল আঁকা যায় না। আসল স্প্রিং বা লাফানো বল কয়েকবার এদিক-ওদিক দোলে। নতুন linear() ফাংশনের নাম শুনে ভুল বুঝবেন না — এটি linear keyword নয়। এতে আপনি বিন্দুর একটি তালিকা দেন, আর ব্রাউজার বিন্দুগুলোকে সোজা দাগে জোড়ে। বিন্দু যথেষ্ট হলে যেকোনো বক্ররেখা — স্প্রিং, বাউন্স — প্রায় নিখুঁতভাবে আঁকা যায়:

body { font-family: sans-serif; padding: 30px 24px; }
.cart {
  padding: 12px 20px; font-size: 16px; color: #fff;
  background: #0f766e; border: 0; border-radius: 999px;
  cursor: pointer;
  transition: transform 600ms ease-out;   /* পুরোনো ব্রাউজার */
  transition: transform 600ms
    linear(0, 0.7 20%, 1.12 35%, 0.96 55%, 1.02 72%, 1);
}
.cart:hover, .cart:focus-visible { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  .cart:hover, .cart:focus-visible { transform: none; }
}
.note { display: none; color: #b91c1c; }
@supports not (transition-timing-function: linear(0, 1)) {
  .note { display: block; }
}

হাতে এত বিন্দু লেখার দরকার নেই — অনলাইনে “linear() easing generator” জাতীয় টুলে স্প্রিংয়ের শক্তি আর ঘর্ষণ বসিয়ে তালিকাটি বানিয়ে নেওয়া যায়। সাপোর্ট: linear() ২০২৩ সালের শেষ নাগাদ চারটি প্রধান ব্রাউজারে এসে Baseline Newly available হয়েছে; ৩০ মাসের হিসাবে ২০২৬-এর মাঝামাঝি নাগাদ এটি Widely available হওয়ার কথা — MDN-এ একবার মিলিয়ে নিন। তবুও উপরের মতো আগে একটি সাধারণ transition লিখে রাখা সস্তা বিমা।

৭ · পারফরম্যান্স — কোন property সরালে ফোন হাঁপায় না

পর্ব ১-এ দেখেছেন, HTML আর CSS থেকে পর্দার ছবি তৈরি হয় কয়েকটি ধাপে: DOM আর CSSOM মিলে render tree, তারপর style হিসাব, layout (কোন বাক্স কোথায়, কত বড়), paint (রং, লেখা, ছায়া আঁকা), আর শেষে compositing (আলাদা স্তরগুলো GPU দিয়ে জোড়া)। transition চলার সময় এই কাজ প্রতিটি ফ্রেমে আবার করতে হতে পারে — আর কতটুকু করতে হবে, তা নির্ভর করে কোন property বদলাচ্ছেন তার ওপর:

তাই বাস্তবের নিয়ম: সরাতে চাইলে top/left/margin নয়, transform: translate(); বড়-ছোট করতে width/height নয়, transform: scale(); দেখানো-লুকাতে opacity. একটি বাড়তি কৌশল: ছায়ার transition দামি হলে ছায়াটি একটি ::after pseudo-element-এ আগেই এঁকে রাখুন, আর শুধু তার opacity বদলান।

/* ✗ প্রতি ফ্রেমে layout */
.drawer { left: -300px; transition: left 300ms ease-out; }
.drawer.open { left: 0; }

/* ✓ শুধু compositor */
.drawer { transform: translateX(-100%); transition: transform 300ms ease-out; }
.drawer.open { transform: none; }

/* ✓ দামি ছায়ার বদলে আগে-আঁকা ছায়ার opacity */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 14px 24px rgb(0 0 0 / 0.18);
  opacity: 0; transition: opacity 250ms ease-out;
}
.card:hover::after { opacity: 1; }

৮ · transitionend, সঠিক সময়ের মাপ আর touch-এর পর্দা

কখনো transition শেষ হলে কিছু করতে হয় — যেমন “অর্ডার নেওয়া হয়েছে” বার্তা মিলিয়ে গেলে সেটি DOM থেকে সরানো, বা স্ক্রিন রিডারের জন্য focus সরানো। এজন্য ব্রাউজার চারটি DOM ঘটনা পাঠায়: transitionrun (transition তৈরি হলো, delay-এর আগে), transitionstart (delay শেষে নড়া শুরু), transitionend (শেষ), আর transitioncancel (মাঝপথে বাতিল)। ঘটনা শোনার কৌশল JavaScript কোর্সের ইভেন্টের পর্বে বিস্তারিত; এখানে শুধু দেখুন কখন কী আসে:

<style>
  body { font-family: sans-serif; }
  .toast {
    width: fit-content; padding: 10px 14px; border-radius: 8px;
    background: #0f172a; color: #fff;
    opacity: 0; transform: translateY(10px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
  }
  .toast.show { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .toast { transform: none; transition-duration: 1ms; }
  }
</style>
<button id="b">অর্ডার নিশ্চিত করুন</button>
<p class="toast" id="toast" role="status">✓ অর্ডার নেওয়া হয়েছে</p>
<script>
  const toast = document.getElementById('toast');
  toast.addEventListener('transitionrun', e => console.log('run  ' + e.propertyName));
  toast.addEventListener('transitionend', e =>
    console.log('end  ' + e.propertyName + ' (' + e.elapsedTime + 's)'));
  document.getElementById('b').addEventListener('click', () => toast.classList.toggle('show'));
</script>

কতক্ষণ? — সময়ের একটি মোটা দাগের নিয়ম

কোনো আইন নেই, তবে UI-ডিজাইনে দীর্ঘদিনের অভিজ্ঞতা থেকে একটি মোটা দাগের নিয়ম চলে আসছে — নিজের পাতায় পরীক্ষা করে ঠিক করুন:

500ms-এর বেশি হলে সাধারণ UI-তে বেশিরভাগ মানুষের কাছে ধীর লাগে, বিশেষ করে যে কাজ দিনে বহুবার করা হয়। আর নিজের ডেভেলপমেন্টের সময় ধীর গতি দিয়ে পরীক্ষা করলে বাস্তবের মাপে ফিরতে ভুলবেন না — DevTools-এর Animations প্যানেলে গতি ১০% বা ২৫%-এ কমিয়ে খুঁটিনাটি দেখা যায়, কোড না বদলেই।

hover-নির্ভর transition আর touch-পর্দা

বাংলাদেশে ওয়েবের বড় অংশ দেখা হয় ফোনে, যেখানে মাউস নেই, তাই আসল hover-ও নেই। মোবাইল ব্রাউজার পুরোনো সাইট ভাঙা এড়াতে একটি ট্যাপকে hover হিসেবেও ধরে, ফলে ট্যাপের পরে কার্ড “উঠে আটকে” থাকে যতক্ষণ না অন্য কোথাও ট্যাপ করছেন — একে বলে sticky hover. তিনটি নিয়ম মানুন:

• শুধু সাজসজ্জার hover-কে @media (hover: hover) and (pointer: fine)-এর ভেতরে রাখুন — মাউস বা ট্র্যাকপ্যাড থাকলেই কাজ করবে।
• hover-এর পাশে সবসময় :focus-visible — কীবোর্ড ব্যবহারকারীও একই সাড়া পাবেন।
• জরুরি তথ্য বা কাজ কখনো শুধু hover-এর পেছনে নয়। দাম, “কিনুন” বোতাম, মেনুর লিংক — ট্যাপ আর কীবোর্ডে সরাসরি পৌঁছানো চাই। পর্দায় চাপার জায়গাও যথেষ্ট বড় রাখুন (touch target, অন্তত 24×24 CSS px).

৯ · AI-এর যুগে — AI-এর দেওয়া transition যাচাই

“বোতামে সুন্দর hover effect দাও” — AI খুব দ্রুত কাজ করে দেয়। কিন্তু অভিজ্ঞতায় দেখা যায়, AI-এর উত্তরে কয়েকটি ভুল বারবার ফিরে আসে, কারণ সে শিখেছে বহু বছরের পুরোনো ব্লগ আর টিউটোরিয়াল থেকে:

AI-এর দেওয়া transition হাতে পেলে — যাচাইয়ের চেকলিস্ট

• কোডে all, vendor prefix, বা left/width-এর নড়াচড়া নেই — থাকলে কেন, তা বুঝেছি
• DevTools-এর Rendering প্যানেলে prefers-reduced-motion: reduce নকল করে দেখেছি — বড় নড়াচড়া থামে, কাজ চলে
• শুধু কীবোর্ড (Tab, Enter, Esc) দিয়ে সব effect আর মেনু চালিয়ে দেখেছি
• Device Toolbar-এ ফোনের মাপে ট্যাপ করে দেখেছি — কিছু “উঠে আটকে” থাকে না
• Performance প্যানেলে রেকর্ড করে, CPU ধীর করে (throttling) দেখেছি — প্রতি ফ্রেমে Layout নেই; Lighthouse-এ কোনো বড় সতর্কতা নেই
• নতুন ফিচারের সাপোর্ট MDN বা Can I use-এ নিজে মিলিয়েছি, আর validator.w3.org-এ HTML পরিষ্কার