Bulma CSS ফ্রেমওয়ার্কে Animation Timing এবং Delay Management সহ বেশ কিছু utilities রয়েছে যা আপনাকে ওয়েবসাইটে অ্যানিমেশন যুক্ত করতে সহায়তা করে। এগুলি ব্যবহার করে আপনি অ্যানিমেশনগুলির সময় (timing) এবং বিলম্ব (delay) নিয়ন্ত্রণ করতে পারেন, যাতে ইউজার ইন্টারফেসে সিলি, স্মুথ এবং দৃষ্টিনন্দন অ্যানিমেশন ইফেক্ট তৈরি করা যায়।
১. Animation Timing (অ্যানিমেশন টাইমিং)
Animation Timing utilities দিয়ে আপনি একটি অ্যানিমেশন বা ট্রান্সিশন কত দ্রুত বা ধীরে চলবে তা নির্ধারণ করতে পারেন। বুলমা এ এই টাইমিংকে ease বা linear প্রকারে ব্যবহার করতে পারে।
Timing ক্লাসসমূহ:
- is-fast: অ্যানিমেশনকে দ্রুত সম্পন্ন করে (টাইমিং: 0.2s)।
- is-normal: অ্যানিমেশনকে সাধারণ গতিতে সম্পন্ন করে (টাইমিং: 0.5s)।
- is-slow: অ্যানিমেশনকে ধীরে সম্পন্ন করে (টাইমিং: 1s)।
উদাহরণ: Animation Timing
<div class="box is-fast">
<p>This box has a fast animation.</p>
</div>
<div class="box is-normal">
<p>This box has a normal animation speed.</p>
</div>
<div class="box is-slow">
<p>This box has a slow animation.</p>
</div>
এখানে is-fast, is-normal, এবং is-slow ক্লাসগুলি ব্যবহার করা হয়েছে অ্যানিমেশনের সময়ের গতি নিয়ন্ত্রণ করতে।
২. Animation Delay (অ্যানিমেশন বিলম্ব)
Animation Delay utilities দ্বারা আপনি অ্যানিমেশনের শুরুতে বিলম্ব যুক্ত করতে পারেন। অর্থাৎ, অ্যানিমেশনটি শুরু হওয়ার আগে কিছু সময়ের জন্য অপেক্ষা করবে।
Delay ক্লাসসমূহ:
- is-0: অ্যানিমেশন বিলম্ব ছাড়া অবিলম্বে শুরু হবে।
- is-100: অ্যানিমেশন শুরু হতে বিলম্ব হবে 0.1 সেকেন্ড পরে।
- is-200: অ্যানিমেশন শুরু হবে 0.2 সেকেন্ড পরে।
- is-300: অ্যানিমেশন শুরু হবে 0.3 সেকেন্ড পরে।
- is-500: অ্যানিমেশন শুরু হবে 0.5 সেকেন্ড পরে।
- is-1000: অ্যানিমেশন শুরু হবে 1 সেকেন্ড পরে।
উদাহরণ: Animation Delay
<div class="box is-100">
<p>This box will animate after 0.1s delay.</p>
</div>
<div class="box is-300">
<p>This box will animate after 0.3s delay.</p>
</div>
<div class="box is-500">
<p>This box will animate after 0.5s delay.</p>
</div>
এখানে is-100, is-300, এবং is-500 ক্লাস ব্যবহার করে অ্যানিমেশনের বিলম্ব (delay) নিয়ন্ত্রণ করা হয়েছে।
৩. Ease and Other Timing Functions
Bulma এ অ্যানিমেশন বা ট্রান্সিশন টাইমিং ফাংশনগুলো নিয়ন্ত্রণের জন্য কিছু অতিরিক্ত ক্লাসও রয়েছে। যেমন ease-in, ease-out, ease-in-out।
উদাহরণ: Ease Timing Functions
<div class="box is-ease-in">
<p>This box uses the "ease-in" timing function.</p>
</div>
<div class="box is-ease-out">
<p>This box uses the "ease-out" timing function.</p>
</div>
<div class="box is-ease-in-out">
<p>This box uses the "ease-in-out" timing function.</p>
</div>
এখানে is-ease-in, is-ease-out, এবং is-ease-in-out ক্লাসগুলি ব্যবহার করা হয়েছে অ্যানিমেশনের টাইমিং ফাংশন সেট করতে।
৪. Combining Animation Timing and Delay
আপনি Animation Timing এবং Animation Delay utilities একত্রে ব্যবহার করে আরো কাস্টমাইজড অ্যানিমেশন তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি একটি অ্যানিমেশনকে ধীর গতিতে শুরু করতে এবং বিলম্ব (delay) এর সাথে শুরু করতে পারেন।
উদাহরণ: Timing এবং Delay একত্রে ব্যবহার
<div class="box is-slow is-500">
<p>This box will animate slowly after 0.5s delay.</p>
</div>
<div class="box is-fast is-1000">
<p>This box will animate quickly after 1s delay.</p>
</div>
এখানে is-slow এবং is-500 ক্লাস একত্রে ব্যবহার করা হয়েছে যাতে অ্যানিমেশন ধীর গতিতে শুরু হয় 0.5 সেকেন্ড পরে।
৫. রেসপনসিভ Animation Timing
Bulma এ আপনি রেসপনসিভ ডিজাইন তৈরির সময় বিভিন্ন স্ক্রীন সাইজ অনুযায়ী Animation Timing এবং Animation Delay নিয়ন্ত্রণ করতে পারেন।
উদাহরণ: রেসপনসিভ Animation Timing
<div class="box is-hidden-mobile is-slow">
<p>This box will animate slowly on screens larger than mobile.</p>
</div>
<div class="box is-hidden-desktop is-fast">
<p>This box will animate quickly on desktop screens.</p>
</div>
এখানে is-hidden-mobile এবং is-hidden-desktop ক্লাসগুলো ব্যবহার করা হয়েছে এবং তাদের সাথে is-slow এবং is-fast ক্লাস যোগ করা হয়েছে, যা স্ক্রীনের সাইজ অনুসারে অ্যানিমেশন টাইমিং নিয়ন্ত্রণ করবে।
সারাংশ
Bulma এর Animation Timing এবং Delay Management utilities আপনাকে অ্যানিমেশনকে আরো নিখুঁতভাবে কাস্টমাইজ করতে সহায়তা করে। Animation Timing utilities দিয়ে আপনি অ্যানিমেশনের গতি (fast, normal, slow) নিয়ন্ত্রণ করতে পারেন, এবং Animation Delay utilities দিয়ে আপনি অ্যানিমেশনের শুরুতে বিলম্ব যোগ করতে পারেন। এগুলি রেসপনসিভ এবং কাস্টমাইজড অ্যানিমেশন তৈরি করতে ব্যবহৃত হতে পারে। Bulma এর এই utilities গুলি আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরো স্মুথ, ইন্টারঅ্যাকটিভ এবং দৃষ্টিনন্দন করে তোলে।
