Keyframe animation — @keyframes দিয়ে চলমান নকশা

১ · Transition-এর পরের ধাপ — যে মোশন নিজে থেকেই চলে

পর্ব ৩৮-এ transition দেখেছেন: বোতামে মাউস রাখলে রং মসৃণভাবে বদলায়। কিন্তু খেয়াল করুন, transition নিজে কিছু শুরু করে না। কোনো একটি অবস্থা বদলাতে হয় — hover, focus, একটি class যোগ হওয়া। তখন ব্রাউজার পুরোনো মান থেকে নতুন মানে যাওয়ার পথটুকু মসৃণ করে দেয়। পথ মাত্র দুই বিন্দুর — শুরু আর শেষ।

এবার ভাবুন একটি অনলাইন দোকানের পাতা লোড হচ্ছে, আর মাঝখানে একটি গোল চাকা ঘুরছে। কেউ মাউস রাখেনি, কোনো class বদলায়নি — তবু চাকা ঘুরছে, থামছে না। এই কাজ transition পারে না। এখানে লাগে CSS animation — যে মোশনের নিজস্ব চিত্রনাট্য আছে, পাতা খুললেই চলতে শুরু করে, যতবার বলবেন ততবার চলে।

@keyframes একটি at-rule. এর ভেতরে আপনি কয়েকটি মুহূর্ত (keyframe) লেখেন — মোট সময়ের কত শতাংশে element কেমন দেখাবে। from মানে 0%, to মানে 100%; মাঝে যত খুশি শতাংশ। দুই keyframe-এর মাঝের অবস্থাগুলো ব্রাউজার নিজেই হিসাব করে ভরিয়ে দেয় — একে বলে interpolation. তারপর element-এ animation property দিয়ে নামটি জুড়ে দেন। নিচের বাসটি দেখুন — কোনো বোতাম নেই:

<style>
  .bus {
    width: 70px; height: 40px; border-radius: 8px;
    background: #16a34a; color: #fff;
    display: grid; place-items: center; font: 700 14px sans-serif;
    animation: drive 4s ease-in-out infinite;
  }
  @keyframes drive {
    from { transform: translateX(0); }
    50%  { transform: translateX(220px); background: #dc2626; }
    to   { transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .bus { animation: none; }
  }
</style>
<p>কেউ কিছু চাপেনি — তবু বাস নিজেই চলছে:</p>
<div class="bus">বাস</div>

কয়েকটি নিয়ম মনে রাখুন। একই শতাংশ একাধিক মুহূর্তে লাগলে কমা দিয়ে লেখা যায়: 0%, 100% { … }. Keyframe-এর ক্রম যেকোনো হতে পারে — ব্রাউজার শতাংশ অনুযায়ী সাজিয়ে নেয়। Keyframe-এর ভেতরে !important লিখলে সেই ঘোষণাটি পুরোপুরি বাদ পড়ে। আর সব property মসৃণভাবে animate হয় না: border-style-এর মতো যে মানের মাঝামাঝি অবস্থা নেই, সেটি discrete-ভাবে অর্ধেক সময়ে লাফ দেয়।

২ · আটটি নিয়ন্ত্রণ — animation-এর property-গুলো

সময়সূচি (@keyframes) লিখলেন। এবার ট্রেনকে বলতে হবে কতক্ষণে পুরো পথ যাবে, কখন ছাড়বে, কতবার যাবে। এই কাজগুলো করে আটটি আলাদা property — প্রতিটির নাম animation- দিয়ে শুরু:

ডিফল্ট duration 0s — তাই শুধু নাম লিখলে কিছুই দেখবেন না, এটি নতুনদের সবচেয়ে সাধারণ ভুল। Timing function-এর সব মান (ease, cubic-bezier(), linear()) পর্ব ৩৮-এ বিস্তারিত দেখেছেন; এখানে একই নিয়ম খাটে, শুধু প্রয়োগ হয় প্রতিটি keyframe-এর মাঝের অংশে আলাদাভাবে, পুরো animation-এ একবার নয় — অংশ ৫-এ এর মজা দেখবেন। Iteration count ভগ্নাংশও হতে পারে: 2.5 মানে আড়াইবার চলে মাঝপথে থামা। আর direction-এর alternate মানে একবার সামনে, একবার উল্টো — দোলনার মতো; alternate-reverse শুরু করে উল্টো দিক থেকে।

নিচে প্রতিটি property আলাদা লাইনে লেখা আছে, যাতে একটি একটি করে বদলে দেখতে পারেন। শেষের নিয়মটি খেয়াল করুন — play-state দিয়ে hover বা ফোকাসে থামানো:

.box { padding: 14px 20px; border-radius: 12px; }
.dot {
  display: inline-block; width: 26px; height: 26px; margin: 0 8px;
  border-radius: 50%; background: #2563eb;
  animation-name: grow;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
}
.box:hover .dot, .box:focus-visible .dot { animation-play-state: paused; }
@keyframes grow { to { transform: scale(1.5); background: #f59e0b; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

৩ · এক লাইনের shorthand — আর তার ক্রমের ফাঁদ

আটটি লাইন প্রতিবার লেখা ক্লান্তিকর। তাই বাস্তবে প্রায় সবাই shorthand animation লেখেন। এখানে মানগুলোর ক্রম মোটামুটি স্বাধীন — ব্রাউজার মানের ধরন দেখে বোঝে কোনটি কী। কিন্তু দুটি জায়গায় ক্রমই সব। নিচের লাইনটি টুকরো টুকরো করে দেখুন:

একাধিক animation shorthand-এও কমা দিয়ে লেখা যায়: animation: spin 1s linear infinite, fade-in 300ms ease-out;. প্রতিটি কমা-অংশ একটি সম্পূর্ণ animation, নিজের সময়, নিজের delay নিয়ে।

৪ · fill-mode — শুরুর আগে আর শেষের পরে কী দেখাবে

Animation-এর একটি অদ্ভুত স্বভাব আছে: সে শুধু নিজের চলার সময়টুকুতেই element-এর চেহারা নিয়ন্ত্রণ করে। Delay-এর অপেক্ষার সময় আর শেষ হওয়ার পরে element ফিরে যায় নিজের সাধারণ CSS-এ। ফলে একটি কার্ড ধীরে ধীরে দৃশ্যমান হয়ে শেষে হঠাৎ অদৃশ্য হয়ে যেতে পারে, বা delay-এর সময় পুরো দেখা গিয়ে তারপর হঠাৎ অদৃশ্য হয়ে আবার ফুটে উঠতে পারে। animation-fill-mode ঠিক এই দুই ফাঁকা সময়ের নিয়ম বলে দেয়।

ধরা যাক একটি বাক্সের নিজের রং ধূসর। Animation-এ from নীল, to সবুজ ও ডানে সরানো; delay ১ সেকেন্ড, duration দেড় সেকেন্ড, একবার চলবে। “পরে” চাপুন আর দেখুন চারটি মানে তিনটি সময়খণ্ডে বাক্স কেমন দেখায়:

1.box { background: gray; }2.box {3  animation: paint 1.5s 1s 1;4  animation-fill-mode: ;5}6@keyframes paint {7  from { background: blue; }8  to { background: green; … }9}

এবার চারটি মান পাশাপাশি নিজের চোখে দেখুন। শেষ হয়ে গেলে “আবার চালান” চাপুন, আর প্রথম এক সেকেন্ডে কোন বাক্স কী রঙে আছে খেয়াল করুন:

<style>
  .row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font: 14px sans-serif; }
  .row b { width: 80px; }
  .box { width: 36px; height: 36px; border-radius: 6px; background: #9ca3af;
    animation: paint 1.5s 1s 1; }
  @keyframes paint {
    from { background: #2563eb; }
    to   { background: #16a34a; transform: translateX(140px); }
  }
  .none { animation-fill-mode: none; }   .fw   { animation-fill-mode: forwards; }
  .bw   { animation-fill-mode: backwards; } .both { animation-fill-mode: both; }
  @media (prefers-reduced-motion: reduce) { .box { animation-duration: 1ms; } }
</style>
<div class="row"><b>none</b><span class="box none"></span></div>
<div class="row"><b>forwards</b><span class="box fw"></span></div>
<div class="row"><b>backwards</b><span class="box bw"></span></div>
<div class="row"><b>both</b><span class="box both"></span></div>
<button type="button" id="again">আবার চালান</button>
<script>
  document.getElementById('again').addEventListener('click', function () {
    document.querySelectorAll('.box').forEach(function (b) {
      b.style.animation = 'none'; b.offsetWidth; b.style.animation = '';
    });
  });
</script>

৫ · সময়ের কারসাজি — negative delay, একাধিক animation আর keyframe-এর নিজস্ব গতি

Negative delay — মাঝপথ থেকে শুরু

Delay ঋণাত্মক হলে animation অপেক্ষা করে না, বরং ধরে নেয় সে আগেই শুরু হয়ে গেছে। animation: blink 1.2s -0.4s infinite মানে “ধরে নাও ০.৪ সেকেন্ড আগে শুরু হয়েছিল” — অর্থাৎ প্রথম ফ্রেমেই সে এক-তৃতীয়াংশ পথ পেরিয়ে আছে। এই কৌশলের সবচেয়ে বড় কাজ staggered loader: একই animation কয়েকটি element-এ, প্রত্যেকে একটু আগে-পরের অবস্থানে। ধনাত্মক delay দিলে পরের বিন্দুগুলো শুরুতে স্থির বসে থাকত; ঋণাত্মক delay-তে প্রথম ফ্রেম থেকেই সবাই ঢেউয়ের মতো চলে।

প্রতি keyframe-এ আলাদা গতি

animation-timing-function কোনো keyframe-এর ভেতরে লিখলে সেটি খাটে ওই keyframe থেকে পরের keyframe পর্যন্ত অংশে। একটি বল ওপর থেকে পড়ার সময় গতি বাড়ে (ease-in), মাটিতে লেগে ওঠার সময় গতি কমে (ease-out) — দুই অংশে দুই রকম গতি দিলেই লাফ বিশ্বাসযোগ্য হয়। নিচে “নিচে স্ক্রল করুন” বোঝানোর লাফানো তীরটি ঠিক তাই করছে:

<style>
  .loader { display: flex; gap: 8px; margin: 12px; }
  .loader span { width: 14px; height: 14px; border-radius: 50%; background: #2563eb;
    animation: wave 1.2s ease-in-out infinite; }
  .loader span:nth-child(1) { animation-delay: -0.8s; }
  .loader span:nth-child(2) { animation-delay: -0.4s; }
  @keyframes wave {
    0%, 100% { opacity: .3; transform: scale(.7); }
    50%      { opacity: 1;  transform: scale(1); }
  }
  .arrow { display: inline-block; margin: 8px 20px; font: 34px sans-serif;
    animation: bounce 1.6s infinite; }
  @keyframes bounce {
    0%   { transform: translateY(0);    animation-timing-function: ease-in; }
    40%  { transform: translateY(16px); animation-timing-function: ease-out; }
    100% { transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { .loader span, .arrow { animation: none; } }
</style>
<div class="loader" aria-hidden="true"><span></span><span></span><span></span></div>
<span class="arrow" aria-hidden="true">↓</span>

একাধিক animation একসাথে — আর তাদের ঝগড়া

একটি element-এ কমা দিয়ে কয়েকটি animation দিলে সবগুলো একসাথে চলে। কিন্তু দুটি যদি একই property (ধরুন দুটিই transform) animate করে, তাহলে তালিকার শেষেরটি জেতে আর প্রথমটির transform পুরো মুছে যায় — কারণ transform একটিই মান। দুটি সমাধান: আলাদা property ব্যবহার করুন — আধুনিক CSS-এ translate, rotate, scale আলাদা property, তাই একটিতে ঘোরান, আরেকটিতে সরান (পর্ব ৪০-এ বিস্তারিত); অথবা animation-composition ব্যবহার করুন।

/* ঘোরা আর ভাসা — দুটি আলাদা property, তাই কোনো ঝগড়া নেই */
.coin { animation: spin 3s linear infinite, float 1.5s ease-in-out infinite alternate; }
@keyframes spin  { to { rotate: 1turn; } }
@keyframes float { to { translate: 0 -12px; } }

/* animation-composition: element-এর নিজের transform-এর ওপর যোগ করো, মুছে দিও না */
.tag { transform: rotate(-8deg); animation: nudge 1s; animation-composition: add; }
@keyframes nudge { to { transform: translateX(20px); } }

animation-composition-এর তিনটি মান: replace (ডিফল্ট — animation-এর মান বসে যায়), add (নিজের মানের পরে animation-এর মান জুড়ে দেয়), accumulate (সংখ্যাগুলো যোগ করে মেলায়)। এটি সব প্রধান ব্রাউজারের বর্তমান সংস্করণে আছে, তবে তুলনামূলক নতুন — দরকারি জায়গায় আলাদা property-র কৌশলটিই সহজ ও নিরাপদ।

৬ · বাস্তবের নকশা — spinner, skeleton, badge, typewriter আর ticker

এবার এমন কয়েকটি নকশা, যা প্রতিদিন bKash, Daraz বা খবরের সাইটে দেখেন। প্রতিটিতে খেয়াল করুন দুটি জিনিস: শুধু transform/opacity নড়ছে কি না, আর reduced motion-এ কী হচ্ছে।

Loading spinner আর skeleton screen

Spinner বলে “কাজ চলছে, অপেক্ষা করুন।” কিন্তু গবেষণা ও অভিজ্ঞতা বলে, কোন জায়গায় কী আসবে তার ধূসর রূপরেখা দেখালে অপেক্ষা কম মনে হয় — একে বলে skeleton screen. ধূসর বাক্সের ওপর দিয়ে একটি হালকা আলোর রেখা (shimmer) বয়ে যায়, যাতে বোঝা যায় পাতা আটকে যায়নি:

<style>
  .spinner { width: 36px; height: 36px; border-radius: 50%;
    border: 4px solid #dbeafe; border-top-color: #2563eb;
    animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(1turn); } }
  .card { display: flex; gap: 12px; width: 280px; margin-top: 16px; }
  .lines { flex: 1; display: grid; gap: 8px; align-content: center; }
  .sk { height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, #e5e7eb 35%, #f9fafb 50%, #e5e7eb 65%) 0 0 / 300% 100%;
    animation: shimmer 1.6s linear infinite; }
  .avatar { width: 48px; height: 48px; border-radius: 50%; }
  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 3s; }
    .sk { animation: none; }
  }
</style>
<div role="status"><div class="spinner"></div><span class="vh">লোড হচ্ছে…</span></div>
<div class="card" aria-hidden="true">
  <div class="sk avatar"></div>
  <div class="lines"><div class="sk"></div><div class="sk" style="width: 70%"></div></div>
</div>

নোটিফিকেশন badge-এর স্পন্দন আর steps() দিয়ে typewriter

নতুন বার্তা এলে লাল badge-এর চারপাশে একটি ঢেউ ছড়িয়ে পড়ে — আসল badge স্থির থাকে, নড়ে শুধু তার পেছনের একটি ::after. আর steps() timing function মসৃণ গতির বদলে নির্দিষ্ট কয়েকটি লাফে চলে — ঘড়ির কাঁটার টিক টিকের মতো। ১৩ অক্ষরের লেখাকে steps(13) দিয়ে চওড়া করলে প্রতি লাফে একটি করে অক্ষর বেরোয়, ঠিক টাইপরাইটারের মতো:

<style>
  .bell { position: relative; border: 0; background: none; font-size: 30px; margin: 14px; }
  .badge { position: absolute; top: 0; right: -6px; min-width: 20px; height: 20px;
    border-radius: 10px; background: #dc2626; color: #fff;
    font: 700 12px/20px sans-serif; isolation: isolate; }
  .badge::after { content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; background: #dc2626;
    animation: ping 2s ease-out infinite; }
  @keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.4); opacity: 0; } }
  .type { width: 13ch; overflow: hidden; white-space: nowrap; font: 20px monospace;
    border-right: 2px solid; animation: typing 3s steps(13) both, caret .75s step-end 4; }
  @keyframes typing { from { width: 0; } }
  @keyframes caret { 50% { border-color: transparent; } }
  @media (prefers-reduced-motion: reduce) { .badge::after, .type { animation: none; } }
</style>
<button type="button" class="bell" aria-label="নোটিফিকেশন — ৩টি নতুন">🔔<span class="badge" aria-hidden="true">3</span></button>
<p class="type">Hello, Dhaka!</p>

<marquee> নয় — CSS দিয়ে চলমান খবরের ফিতা

টিভির নিচে যেমন খবরের লাইন সরে যায়, ১৯৯০-এর দশকে ওয়েবে তার জন্য ছিল <marquee> ট্যাগ। HTML Living Standard এটিকে এখন obsolete (বাতিল, নিয়মবহির্ভূত) তালিকায় রেখেছে — ব্রাউজার পুরোনো সাইট না ভাঙতে এখনো দেখায়, কিন্তু নতুন কোডে লেখা ভুল। কারণ HTML-এর কাজ অর্থ, চেহারা নয়; আর এটি reduced motion মানে না, ব্যবহারকারীকে থামানোর সহজ উপায় দেয় না। CSS-এর বিকল্পে আমরা সবকিছু নিয়ন্ত্রণ করি — এমনকি একটি “থামান” বোতামও দিই:

<style>
  .ticker { overflow: hidden; border: 1px solid #fcd34d; background: #fffbeb; font: 15px sans-serif; }
  .track { display: flex; width: max-content; padding: 8px 0;
    animation: scroll 18s linear infinite; }
  .track span { padding-right: 48px; }
  .ticker:hover .track, .ticker:focus-within .track, .paused .track { animation-play-state: paused; }
  @keyframes scroll { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .track { animation: none; width: auto; flex-wrap: wrap; }
    .track [aria-hidden] { display: none; }
  }
</style>
<div class="ticker" id="ticker"><div class="track">
  <span>ঢাকায় আজ বৃষ্টির সম্ভাবনা</span><span>মেট্রো রেল চলছে নিয়মিত</span><span>বইমেলা শুরু ১ ফেব্রুয়ারি</span>
  <span aria-hidden="true">ঢাকায় আজ বৃষ্টির সম্ভাবনা</span><span aria-hidden="true">মেট্রো রেল চলছে নিয়মিত</span><span aria-hidden="true">বইমেলা শুরু ১ ফেব্রুয়ারি</span>
</div></div>
<p><button type="button" id="pause" aria-pressed="false">থামান</button></p>
<script>
  document.getElementById('pause').addEventListener('click', function () {
    var on = document.getElementById('ticker').classList.toggle('paused');
    this.setAttribute('aria-pressed', on); this.textContent = on ? 'চালান' : 'থামান';
  });
</script>

@property দিয়ে variable animate করা — পর্ব ৩৭-এর পুনরালোচনা

পর্ব ৩৭-এ দেখেছেন, সাধারণ custom property-র মান ব্রাউজারের কাছে শুধু লেখা, তাই keyframe-এ বদলালে সেটি discrete-ভাবে লাফ দেয়। @property দিয়ে ধরন জানালে মাঝের মান হিসাব করা যায়। একটি progress-বৃত্ত শূন্য থেকে ৭৫% পর্যন্ত ভরানো — gradient নিজে animate হয় না, কিন্তু তার ভেতরের variable হয়:

@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.ring {
  width: 80px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#16a34a var(--p, 75%), #e5e7eb 0);
  animation: fill 1.5s ease-out both;
}
@keyframes fill { from { --p: 0%; } to { --p: 75%; } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; --p: 75%; } }

@property এখন Baseline Newly available; যে ব্রাউজার চেনে না, সেখানে বৃত্ত মসৃণভাবে ভরে না, মাঝপথে এক লাফে ৭৫%-এ পৌঁছায় — মোশন নেই, তথ্য ঠিক। এটাই progressive enhancement.

৭ · সবার জন্য নিরাপদ মোশন — reduced motion আর WCAG

মোশন সবার কাছে আনন্দের নয়। কানের ভেতরের ভারসাম্য-ব্যবস্থার সমস্যায় (vestibular disorder) ভোগা অনেকের কাছে বড় জুম, প্যারালাক্স বা ঘূর্ণন মাথা ঘোরা, বমিভাব ঘটাতে পারে — চলন্ত লঞ্চে বই পড়ার মতো অনুভূতি। মনোযোগে সমস্যা (ADHD) থাকলে কোণে অবিরাম নড়তে থাকা কিছু পুরো পাতা পড়াই কঠিন করে। আর দ্রুত ঝলকানি কিছু মানুষের খিঁচুনি ঘটাতে পারে — এটি অস্বস্তি নয়, চিকিৎসাগত বিপদ।

প্রতিটি আধুনিক অপারেটিং সিস্টেমে মোশন কমানোর সেটিং আছে — Windows-এ “Animation effects” বন্ধ করা, Android-এ “Remove animations”, iPhone ও Mac-এ “Reduce Motion”. ব্রাউজার এই পছন্দ prefers-reduced-motion media feature দিয়ে আপনাকে জানায়। এই পর্বের প্রতিটি উদাহরণে এটি আছে। দুটি লেখার ধরন:

/* ধরন ১ — মোশন সবার জন্য, যিনি চান না তাঁর জন্য বন্ধ/নরম */
.card { animation: rise .5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .card { animation-name: fade; }          /* সরে আসার বদলে শুধু ফুটে ওঠা */
}

/* ধরন ২ — মোশন-বিহীন ভিত্তি, শুধু যিনি আপত্তি করেননি তাঁকে মোশন */
@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise .5s ease-out both; }
}
@keyframes rise { from { opacity: 0; translate: 0 24px; } }
@keyframes fade { from { opacity: 0; } }

“Reduce” মানে সবসময় “শূন্য” নয়। স্থান-বদলের মোশন (সরানো, জুম, ঘোরানো) সবচেয়ে বেশি সমস্যা করে; রঙ বা opacity-র নরম পরিবর্তন সাধারণত নিরাপদ। আর যে মোশন তথ্য বহন করে (spinner, progress), তা পুরো বন্ধ না করে ধীর বা স্থির বিকল্পে বদলান। একটি সতর্কতা: অনেকে সব animation বন্ধ করতে * { animation: none !important; } লেখেন — এতে animationend-এর ওপর নির্ভর করা JavaScript আর কখনো ঘটনা পায় না, পাতা আটকে যায়। নিরাপদ বিকল্প animation-duration: 1ms, যাতে animation “শেষ” হয়, কিন্তু চোখে পড়ে না।

2.2.2-এর একটি ব্যতিক্রম বুঝে রাখুন: পাতা লোডের সময় যখন অন্য কিছু করার নেই, তখন spinner-কে অপরিহার্য ধরা যায়। কিন্তু লোড শেষে spinner পাতার কোণে ঘুরতেই থাকলে আর ব্যতিক্রম খাটে না — কাজ শেষ হলে সরিয়ে দিন। WCAG-এর প্রতিটি success criterion অনেক দেশে আইনি মানদণ্ড হিসেবেও ব্যবহৃত হয় — সেসব দেশে সরকারি সাইটসহ অনেক সাইটের জন্য এগুলো বাধ্যতামূলক। অংশ ২-এর hover-pause একা যথেষ্ট নয়, কারণ ফোন ব্যবহারকারীর মাউস নেই — একটি আসল বোতাম রাখুন, যেমন ticker-এ রেখেছি। পর্ব ৪৫-এ অ্যাক্সেসিবল CSS-এর পুরো ছবি দেখবেন।

৮ · মসৃণ, না ঝাঁকুনি — animation-এর পারফরম্যান্স

সিনেমা যেমন আসলে সেকেন্ডে কয়েক ডজন স্থির ছবি, পর্দার animation-ও তেমনি ফ্রেমের সারি। বেশিরভাগ পর্দা সেকেন্ডে ৬০ বার নতুন ছবি আঁকে (অনেক নতুন ফোনে ৯০ বা ১২০ বার), তাই প্রতিটি ফ্রেমের জন্য ব্রাউজার পায় মোটামুটি ১৬ মিলিসেকেন্ড — এই ফ্রেমের বাজেট পেরোলে ফ্রেম বাদ পড়ে, চোখে লাগে ঝাঁকুনি, যাকে বলে jank. কোন property animate করছেন, তার ওপর নির্ভর করে প্রতি ফ্রেমে কত কাজ। পর্ব ১-এর rendering ধাপগুলো মনে করে দেখুন:

will-change: transform লিখে ব্রাউজারকে আগাম জানানো যায় যে element-টি নড়বে, যাতে সে আগেই আলাদা স্তর বানিয়ে রাখে। কিন্তু প্রতিটি স্তর মেমরি খায়; শত শত element-এ লিখলে ফোনে উল্টো ধীর হয়। নিয়ম: আগে মেপে দেখুন সমস্যা আছে কি না, তারপর শুধু সেই element-এ, আর সম্ভব হলে animation-এর আগে যোগ করে পরে সরিয়ে দিন। চলমান CSS animation-এর ক্ষেত্রে ব্রাউজার সাধারণত নিজেই স্তর বানায়।

নিজে মাপবেন কীভাবে? Chrome বা Edge-এর DevTools-এ Performance প্যানেলে রেকর্ড করুন — বেগুনি (Layout) আর সবুজ (Paint) ব্লক প্রতি ফ্রেমে দেখলে বুঝবেন দামি property নড়ছে। “Rendering” ট্যাবের “Paint flashing” চালু করলে যেখানে নতুন করে paint হচ্ছে সেখানে সবুজ ঝলক দেখায়। আর “Animations” প্যানেলে পাতার সব animation সময়রেখায় দেখা যায়, ১০% গতিতে ধীর করে খুঁটিয়ে দেখা যায়।

৯ · JavaScript-এর সাথে — animation-এর ঘটনা আর Web Animations API

কখনো animation শেষ হলে কিছু করতে হয় — যেমন “টাকা পাঠানো হয়েছে” বার্তা ভেসে ওঠার পর কয়েক সেকেন্ড রেখে সরিয়ে দেওয়া। CSS animation চারটি ঘটনা (event) পাঠায়: animationstart, animationiteration (প্রতি চক্র শেষে), animationend, আর animationcancel (মাঝপথে সরিয়ে নিলে)। JavaScript-এর ঘটনা ধরার নিয়ম আমাদের JavaScript কোর্সের events পর্বে বিস্তারিত আছে।

আর পুরো animation JavaScript থেকেই বানাতে চাইলে আছে Web Animations API — element.animate(keyframes, options). Keyframe হয় বস্তুর তালিকা, option-এ সেই চেনা নামগুলো: duration (মিলিসেকেন্ডে), easing, iterations, direction, fill. ফেরত আসে একটি Animation বস্তু, যার pause(), play(), reverse(), playbackRate আর শেষ হওয়ার promise finished আছে। এটি Baseline Widely available.

<style>
  .toast { width: max-content; padding: 10px 14px; border-radius: 8px;
    background: #16a34a; color: #fff; font: 15px sans-serif; animation: pop .4s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translateY(10px); } }
  .ball { width: 30px; height: 30px; margin: 16px 0; border-radius: 50%; background: #f59e0b; }
  @media (prefers-reduced-motion: reduce) { .toast { animation-duration: 1ms; } }
</style>
<div class="toast" id="toast">টাকা পাঠানো হয়েছে ✓</div>
<div class="ball" id="ball"></div>
<button type="button" id="go">Web Animations API দিয়ে চালান</button>
<script>
  document.getElementById('toast').addEventListener('animationend', function (e) {
    console.log('animationend: ' + e.animationName + ', ' + e.elapsedTime + 's');
  });
  var reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.getElementById('go').addEventListener('click', function () {
    var anim = document.getElementById('ball').animate(
      [{ transform: 'translateX(0)' }, { transform: 'translateX(200px)' }],
      { duration: reduce ? 1 : 700, easing: 'ease-in-out', iterations: 2, direction: 'alternate' });
    anim.finished.then(function () { console.log('WAAPI: বল ফিরে এসেছে'); });
  });
</script>

কখন কোনটি? সাজসজ্জার, আগে থেকে জানা মোশন (loader, প্রবেশ, hover) — CSS. ব্যবহারকারীর আচরণ অনুযায়ী মান হিসাব করতে হয় (টেনে নেওয়া, ক্লিকের জায়গা থেকে ঢেউ), মাঝপথে থামিয়ে উল্টো চালাতে হয়, বা কয়েকটি animation-কে সময় মিলিয়ে নিয়ন্ত্রণ করতে হয় — Web Animations API. দুটি একই ইঞ্জিনে চলে, তাই transform/opacity-র নিয়ম দুটিতেই খাটে। পাতার দুই অবস্থার মাঝের মোশনের জন্য আছে View Transitions (পর্ব ৩৭), আর স্ক্রলের সাথে বাঁধা মোশনের জন্য scroll-driven animation (পর্ব ৪২)।

১০ · AI-এর যুগে animation — সুন্দর দেখানো সহজ, ঠিক রাখা কঠিন

“একটা সুন্দর loading animation দাও” বললে AI কয়েক সেকেন্ডে চমকপ্রদ কোড দেবে। দেখতে ভালো লাগবে বলেই ভুলগুলো চোখ এড়িয়ে যায়। এই পর্ব পড়ার পর আপনি যেগুলো ধরতে পারবেন:

AI-এর animation কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• কোন property নড়ছে দেখেছি — transform/opacity ছাড়া কিছু থাকলে কারণ বুঝেছি; DevTools-এর Performance বা Paint flashing দিয়ে মিলিয়েছি
• অপারেটিং সিস্টেমে “অ্যানিমেশন কমান” চালু করে (বা DevTools-এর Rendering ট্যাবে prefers-reduced-motion অনুকরণ করে) পাতা খুলে দেখেছি
• ৫ সেকেন্ডের বেশি নিজে থেকে চলা প্রতিটি মোশনে থামানোর আসল বোতাম আছে; কোথাও দ্রুত ঝলকানি নেই
• shorthand-এ duration আর delay-এর ক্রম, আর fill-mode ঠিক আছে — শেষে element ঝটকা দিয়ে ফেরে না
• অজানা property বা মানের সমর্থন MDN আর Can I use-এ দেখেছি, আর validator.w3.org-এ HTML পরীক্ষা করেছি
• Lighthouse চালিয়ে দেখেছি “Avoid non-composited animations”-এর মতো সতর্কবার্তা আসে কি না