CSS অ্যানিমেশন জেনারেটর কী?

ফ্রি অনলাইন CSS অ্যানিমেশন জেনারেটর। ভিজুয়াল এডিটরের মাধ্যমে CSS কীফ্রেম অ্যানিমেশন তৈরি করুন।

CSS অ্যানিমেশন নড়াচড়া, ভিজ্যুয়াল প্রতিক্রিয়া এবং আকর্ষণীয় ট্রানজিশনসহ ওয়েব ইন্টারফেসকে প্রাণবন্ত করে। সূক্ষ্ম হোভার প্রভাব থেকে মনোযোগ আকর্ষণকারী লোডিং ইন্ডিকেটর পর্যন্ত, কীফ্রেম অ্যানিমেশন আধুনিক ওয়েব ডিজাইনের জন্য অপরিহার্য। CSS অ্যানিমেশন জেনারেটর কাস্টমাইজযোগ্য সময়, ইজিং এবং পুনরাবৃত্তি সেটিংসসহ ১০টি রেডি-মেড কীফ্রেম অ্যানিমেশন প্রদান করে।

bounce, shake, pulse, spin, fade in, slide in left, slide in right, flip, wobble এবং swing থেকে বেছে নিন। প্রতিটি অ্যানিমেশনের একটি নিবেদিত @keyframes সংজ্ঞা রয়েছে যা শুরু, মধ্যবর্তী এবং শেষ অবস্থা পরিচালনা করে। একটি অ্যানিমেশন নির্বাচন করুন এবং ডেমো এলিমেন্টে তাৎক্ষণিকভাবে প্রিভিউ করুন।

ডিউরেশন (একটি চক্র কত সময় নেয়, 0.1s থেকে 10s), ইজিং ফাংশন (ease, ease-in, ease-out, ease-in-out, linear, বা একটি কাস্টম cubic-bezier মান), ডেলে (অ্যানিমেশন শুরুর আগে সময়, 0s থেকে 5s), ইটারেশন কাউন্ট (1, 2, 3, infinite, বা কাস্টম) এবং ডিরেকশন (normal, reverse, alternate, alternate-reverse) সামঞ্জস্য করুন।

লাইভ প্রিভিউ একটি ডেমো এলিমেন্টে অ্যানিমেশনটি চালানো দেখায়, বর্তমান @keyframes কোডটি সম্পূর্ণ CSS-এর পাশে প্রদর্শিত হয়। সম্পূর্ণ অ্যানিমেশন কোড — @keyframes নিয়ম এবং animation প্রপার্টি উভয়ই — এক ক্লিকে কপি করুন। জেনারেট করা কোড ভেন্ডর-প্রিফিক্স-মুক্ত সিনট্যাক্স ব্যবহার করে, যা সব আধুনিক ব্রাউজারে কাজ করে।

CSS অ্যানিমেশন জেনারেটর-এর বাস্তব ব্যবহারের উদাহরণ

একটি কল-টু-অ্যাকশন বাটনে সূক্ষ্ম পালস অ্যানিমেশন যোগ করা

একটি CTA বাটনের মনোযোগ আকর্ষণের জন্য মৃদু পালসিং প্রয়োজন। pulse অ্যানিমেশন নির্বাচন করুন, ডিউরেশন 2s, ইজিং ease-in-out এবং ইটারেশন infinite সেট করুন। বাটনটি মৃদুভাবে উপরে-নিচে স্কেল হয়, বিচ্ছিন্ন না হয়ে সূক্ষ্ম ভিজ্যুয়াল জোর তৈরি করে।

bounce অ্যানিমেশনসহ একটি লোডিং স্পিনার তৈরি করা

একটি লোডিং অবস্থার একটি আকর্ষণীয় ইন্ডিকেটর প্রয়োজন। bounce অ্যানিমেশন নির্বাচন করুন, ডিউরেশন 1s, ইজিং ease-in-out এবং ইটারেশন infinite সেট করুন। ডেমো এলিমেন্টটি ক্রমাগত বাউন্স করে। একটি স্পিনার ভ্যারিয়েশনের জন্য 360 ডিগ্রি ঘোরাতে কীফ্রেমটি অভিযোজিত করুন।

পেজ কন্টেন্টের জন্য fade-in প্রবেশ অ্যানিমেশন করা

পেজ বিভাগগুলো প্রদর্শিত হওয়ার সাথে সাথে fade in হওয়া উচিত। fade-in অ্যানিমেশন নির্বাচন করুন, ডিউরেশন 1.5s, ইজিং ease-out, ডেলে 0.3s, ইটারেশন 1 সেট করুন। এলিমেন্টটি সামান্য উপরের দিকে নড়াচড়াসহ স্বচ্ছ থেকে অস্বচ্ছে বিবর্ণ হয়। আপনার পছন্দের ইন্টারসেকশন অবজারভার লাইব্রেরি ব্যবহার করে এই অ্যানিমেশন ক্লাসটি পেজ বিভাগে প্রয়োগ করুন।

কেন CSS অ্যানিমেশন জেনারেটর ব্যবহার করবেন?

  • 10 ready-to-use keyframe animations
  • Adjustable duration, easing, delay, and iterations
  • লাইভ preview of animation
  • Full CSS output with @keyframes

CSS অ্যানিমেশন জেনারেটর কীভাবে ব্যবহার করবেন — ধাপে ধাপে

1

an animation type থেকে the available options. নির্বাচন করুন।

2

duration, easing, delay, and iteration settings. সামঞ্জস্য করুন।

3

Watch the live preview to fine-tune timing.

4

the CSS code including @keyframes. কপি করুন।

CSS অ্যানিমেশন জেনারেটর কার জন্য সেরা?

  • UI micro-interactions
  • landing page effects
  • loading indicators
  • presentation animations

CSS অ্যানিমেশন জেনারেটর-এর জন্য প্রো টিপস

  • 1সুনির্দিষ্ট সময় নিয়ন্ত্রণের জন্য cubic-bezier ইজিং বিকল্পটি ব্যবহার করুন। সাধারণ মান: ease (0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1)।
  • 2প্রবেশ অ্যানিমেশনের জন্য (fade in, slide in), প্রাকৃতিক মন্দনের জন্য 0.5-1.5s ডিউরেশন এবং ease-out ইজিং ব্যবহার করুন। জোর অ্যানিমেশনের জন্য (bounce, pulse), ease-in-outসহ 1-3s ভালো কাজ করে।
  • 3একই সাথে অনেক বেশি এলিমেন্ট অ্যানিমেট করা এড়িয়ে চলুন। transform এবং opacity প্রপার্টি অ্যানিমেট করার সময় পারফরম্যান্স সর্বোত্তম হয়। লেআউট পুনঃগণনা ট্রিগার করে এমন width, height বা position প্রপার্টি অ্যানিমেট করা এড়িয়ে চলুন।
  • 4অ্যানিমেশন শেষ হওয়ার পরে শেষ অবস্থাটি দৃশ্যমান রাখতে animation-fill-mode: forwards সেট করুন। প্রবেশ অ্যানিমেশনের জন্য এটি অপরিহার্য যেখানে এলিমেন্টটি দৃশ্যমান থাকা উচিত।

CSS অ্যানিমেশন জেনারেটর — প্রায়শই জিজ্ঞাসিত প্রশ্ন

What animations are available?

Bounce, shake, pulse, spin, fade in, slide in left, slide in right, flip, wobble, and swing.

আমি কি customize the keyframes?

generator provides the full @keyframes block. You can further edit or combine animations by modifying the generated CSS.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is CSS অ্যানিমেশন জেনারেটর really free to use?

Yes, CSS অ্যানিমেশন জেনারেটর is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

CSS অ্যানিমেশন জেনারেটর ব্যবহার করতে প্রস্তুত?

বিনামূল্যের অনলাইন টুল — আপনার ব্রাউজারে কাজ করে, নিবন্ধনের প্রয়োজন নেই। এখনই ব্যবহার শুরু করুন।

এখনই চেষ্টা করুন
Free Forever · No Sign-up

182 Free Tools at Your Fingertips

All free online tools for developers, designers, students, and creators. Every tool works in your browser — no sign-up, no data collection.