CSS Animation দিয়ে Bouncing SVG আইকন বানানো

CSS Animation ব্যবহার করে একটি SVG অ্যারো আইকন বাউন্স (উপরে-নিচে লাফানো) করানো শিখুন। Animation type, timing, duration টিউনিংও শিখবেন।

কেন আনিমেশন?

ইউজারকে গাইড করা
অ্যাকশন নেওয়ায় অনুপ্রেরণা দেওয়া
ইউজারের অটেনশন আকর্ষণ করা

HTML: কন্টেইনার ও অ্যারো

৪টি HTML এলিমেন্ট লাগবে:

SVG অ্যারো আইকন (ইমেজ এলিমেন্ট)
টেক্সট লেবেল (span)
কন্টেইনার-ফুটার (অ্যারো + লেবেল র‍্যাপার)
মেইন কন্টেইনার (সব র‍্যাপার)

<div class="container"> 
  <div class="container-footer"> 
    <span class="text-label">Explore</span> 
    <svg class="arrow-circle-down bounce" viewbox="0 0 1792 1792" xmlns="https://www.w3.org/2000/svg"> 
      <path d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" fill="#fff"></path> 
    </svg> 
  </div> 
</div>

SVG Font Awesome-র GitHub রিপো থেকে নেওয়া যায়। ইনলাইন SVG ব্যবহার করা হয়েছে—ব্যান্ডউইডথ বাঁচাতে শুধু প্রয়োজনীয় আইকনগুলো SVG ফরম্যাটে ডাউনলোড করুন।

CSS: স্টাইলিং

* { margin: 0; padding: 0; } 
.container { display: flex; background-color: #26a1ff; height: 100vh; } 
.container-footer { display: flex; flex-direction: column; align-items: center; margin: auto auto 1rem auto; } 
.text-label { text-transform: uppercase; font-family: helvetica; font-size: 0.75rem; letter-spacing: 0.2em; color: #fff; } 
.arrow-circle-down { display: block; width: 40px; height: 40px; margin: 16px 0; }

CSS Animation: বাউন্স ইফেক্ট

.bounce { animation: bounce 2s; } 
@keyframes bounce { 
  0%, 25%, 50%, 75%, 100% { transform: translateY(0); } 
  40% { transform: translateY(-20px); } 
  60% { transform: translateY(-12px); } 
}

Animation Breakdown

animation: bounce 2s → bounce keyframe 트িগার, ২ সেকেন্ড ডুরেশন
৭টি কiframe: 0%, 25%, 40%, 50%, 60%, 75%, 100%
৩টি Y পজিশন: Y(0), Y(-20px), Y(-12px)
৪০% এ -20px (আপ), ৫০% এ 0 (ডাউন), ৬০% এ -12px (আরেকবার আপ) — বouncing ইফেক্ট

ভেরিয়েশন

animation-delay: 5s → ৫ সেকেন্ড পরে শুরু
animation-iteration-count: 2 → ২ বার রিপিট
animation-iteration-count: infinite → অসীম লুপ (সাবধানতায় ব্যবহার করুন)

Autoprefixer ব্যবহার করলে সব ব্রাউজারে কাজ করবে। CodePen-এ পূর্ণ কোড পাবেন।