Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সাহায্য করে। তবে, Pure.CSS সরাসরি বিল্ট-ইন অ্যানিমেশন ক্লাস বা ট্রানজিশন সরবরাহ করে না। তবে, আপনি CSS3 এর কাস্টম অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করে Pure.CSS এর সাথে একটি শক্তিশালী অ্যানিমেশন এবং ট্রানজিশন সিস্টেম তৈরি করতে পারেন। নিচে Custom Animations এবং Transitions তৈরি করার উদাহরণ দেওয়া হলো।
১. Pure.CSS এর Built-in Animation Classes:
যদিও Pure.CSS এ সরাসরি অ্যানিমেশন সম্পর্কিত কোনো বিল্ট-ইন ক্লাস নেই, তবে আপনি CSS3 Animation ব্যবহার করে অ্যানিমেশন তৈরি করতে পারেন। এখানে কিছু সাধারণ অ্যানিমেশন উদাহরণ দেওয়া হলো:
a) Fade-in Animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Fade-in Animation</title>
<style>
.fade-in {
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="fade-in pure-u-1-2">
<h1>Welcome to Pure.CSS!</h1>
<p>This content fades in when the page loads.</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- @keyframes fadeIn: এটি একটি কাস্টম অ্যানিমেশন তৈরি করে যা এলিমেন্টের opacity পরিবর্তন করে।
- fade-in ক্লাস: এই ক্লাসটি অ্যাপ্লাই করা হলে, এলিমেন্টের opacity শুরু হয় ০ (অদৃশ্য) থেকে ১ (দৃশ্য) পর্যন্ত, এবং এটি 2 সেকেন্ড সময় নিয়ে সম্পন্ন হয়।
২. Custom Animations with CSS:
এখন, চলুন কিছু কাস্টম অ্যানিমেশন তৈরি করি। এখানে কিছু উদাহরণ দেওয়া হলো:
a) Bounce Animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Bounce Animation</title>
<style>
.bounce {
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
</style>
</head>
<body>
<div class="bounce pure-u-1-2">
<h1>Bouncing Text</h1>
<p>This text bounces up and down!</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- @keyframes bounce: এই অ্যানিমেশনটি এলিমেন্টটিকে উপরে (20px) এবং নিচে (0px) সরিয়ে দেয়, এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে (১ সেকেন্ড) বারবার ঘটবে।
- bounce ক্লাস: এলিমেন্টটির জন্য বাউন্স অ্যানিমেশন চালু করে।
b) Scale Animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Scale Animation</title>
<style>
.scale {
animation: scaleUp 1s ease-in-out infinite alternate;
}
@keyframes scaleUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
</style>
</head>
<body>
<div class="scale pure-u-1-2">
<h1>Scaling Text</h1>
<p>This text scales up and down!</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- @keyframes scaleUp: এই অ্যানিমেশনটি এলিমেন্টের আকার বৃদ্ধি করে (scale(1) থেকে scale(1.2)) এবং পরে পুনরায় ছোট হয়।
- scale ক্লাস: এটি scaleUp অ্যানিমেশন চালু করে।
৩. CSS Transitions:
CSS3 Transition ব্যবহার করে আপনি কোনো উপাদানের স্টাইলের পরিবর্তনকে মসৃণভাবে করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো:
a) Simple Hover Transition:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Hover Transition</title>
<style>
.transition-box {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.transition-box:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="transition-box pure-u-1-2">
<h1>Hover Over Me!</h1>
<p>Watch the background color change smoothly.</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- transition: এটি ইনপুট পরিবর্তন করার সময় একটি অ্যানিমেশন (এখানে ব্যাকগ্রাউন্ড কালারের পরিবর্তন) যোগ করে, যা ০.৩ সেকেন্ডে মসৃণভাবে ঘটে।
- :hover: যখন ব্যবহারকারী মাউস এলিমেন্টটির উপর রাখবে, তখন ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে।
b) Smooth Scale on Hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Scale on Hover</title>
<style>
.scale-on-hover {
transition: transform 0.3s ease;
}
.scale-on-hover:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="scale-on-hover pure-u-1-2">
<h1>Hover to Scale</h1>
<p>This box scales up when you hover over it.</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- transition: এই স্টাইলের মাধ্যমে এলিমেন্টটির আকারের পরিবর্তন (স্কেল) একটি মসৃণ অ্যানিমেশনের মাধ্যমে ঘটবে।
- :hover: হোভার করার সময় এলিমেন্টটি স্কেল (1.1) হয়ে যাবে।
Pure.CSS সরাসরি বিল্ট-ইন অ্যানিমেশন ক্লাস প্রদান না করলেও, CSS3 Animations এবং Transitions ব্যবহার করে আপনি আপনার ওয়েবসাইটে কাস্টম অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে পারেন। এটি আপনার ওয়েবসাইটের ইন্টারফেসকে আরও প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ করে তুলবে, এবং ব্যবহারকারীর অভিজ্ঞতাও উন্নত করবে।
Read more
