Pure.CSS মূলত একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টে সহজ এবং কার্যকরী স্টাইলিং সরবরাহ করে। তবে, Pure.CSS এর মধ্যে সরাসরি বিল্ট-ইন অ্যানিমেশন ক্লাস নেই, কারণ এটি মূলত একটি CSS ফ্রেমওয়ার্ক যা ফর্ম, টেবিল, মেনু, গ্রিড সিস্টেম এবং অন্যান্য মৌলিক স্টাইলিং কম্পোনেন্টে ফোকাস করে। তবে, আপনি Pure.CSS এর সাথে CSS Transitions এবং CSS Animations ব্যবহার করে অ্যানিমেশন তৈরি করতে পারেন।
এখানে Pure.CSS এর সাথে CSS Animations এবং CSS Transitions কিভাবে ব্যবহার করবেন তা নিয়ে কিছু উদাহরণ দেওয়া হলো।
১. Pure.CSS এর সাথে CSS Transitions:
CSS Transitions এর মাধ্যমে আপনি উপাদানগুলির মধ্যে অবস্থান পরিবর্তন বা অন্যান্য বৈশিষ্ট্যগুলিতে পরিবর্তন ঘটাতে পারেন। উদাহরণস্বরূপ, একটি বাটনের হোভার ইফেক্ট:
<!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>Button Hover Animation</title>
<style>
.pure-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
transition: background-color 0.3s, transform 0.3s; /* Transition on hover */
}
.pure-button:hover {
background-color: #45a049;
transform: scale(1.1); /* Scale on hover */
}
</style>
</head>
<body>
<button class="pure-button">Hover Me!</button>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- transition প্রপার্টি দিয়ে ব্যাকগ্রাউন্ড কালার এবং ট্রান্সফর্ম (স্কেল) ইফেক্টে পরিবর্তন আনা হয়েছে।
- :hover পসুডো-ক্লাস ব্যবহার করা হয়েছে, যা বাটনে মাউস হোভার করলে এক্সিকিউট হবে।
transform: scale(1.1);ইফেক্ট বাটনটিকে হোভার করার সময় বড় করে।
২. Pure.CSS এর সাথে CSS Keyframe Animations:
CSS Animations ব্যবহার করে আপনি আরও জটিল অ্যানিমেশন তৈরি করতে পারেন। উদাহরণস্বরূপ, একটি সিম্পল keyframes 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>Simple Animation with Pure.CSS</title>
<style>
.animate-box {
width: 100px;
height: 100px;
background-color: #4CAF50;
animation: moveRight 2s infinite; /* Apply animation */
}
@keyframes moveRight {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="animate-box"></div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- @keyframes moveRight: এটি একটি কাস্টম অ্যানিমেশন যা 0% থেকে 100% পর্যন্ত পরিবর্তন ঘটে, যার মধ্যে উপাদানটি ডান দিকে সরে যাবে এবং পরে আবার তার মূল অবস্থানে ফিরে আসবে।
- animation:
moveRightঅ্যানিমেশনটি 2 সেকেন্ড ধরে চলবে এবং infinite নির্দিষ্ট করলে এটি চিরকাল চলতে থাকবে।
৩. Pure.CSS এর সাথে Fade In and Fade Out Effect:
অ্যানিমেশন দিয়ে একটি উপাদানকে ধীরে ধীরে ফেড ইন বা ফেড আউট করা যেতে পারে। এটি ওয়েব পেজে উপাদানগুলির আবির্ভাব বা অদৃশ্য হওয়ার জন্য ব্যবহার করা যেতে পারে।
<!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; /* Fade in animation */
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="fade-in">
<h2>This element fades in</h2>
<p>This text will gradually appear when the page loads.</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- .fade-in: প্রথমে
opacity: 0;দ্বারা উপাদানটি অদৃশ্য থাকে। - @keyframes fadeIn: অ্যানিমেশনটি 2 সেকেন্ডের মধ্যে উপাদানটির অপাসিটি 0 থেকে 1 পর্যন্ত পরিবর্তিত করে, ফলে এটি ধীরে ধীরে দৃশ্যমান হয়ে ওঠে।
৪. Pure.CSS এর সাথে Slide In Animation:
একটি উপাদানকে স্লাইড ইন করার জন্য @keyframes ব্যবহার করা যেতে পারে। এখানে একটি উদাহরণ দেওয়া হলো যেখানে একটি উপাদান ডানদিকে স্লাইড ইন করবে।
<!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>Slide In Animation</title>
<style>
.slide-in {
position: relative;
left: -300px;
animation: slideIn 1s ease-out forwards;
}
@keyframes slideIn {
0% {
left: -300px;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<div class="slide-in">
<h2>This element slides in from the left</h2>
<p>This text will slide in from the left side when the page loads.</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- .slide-in: উপাদানটি প্রথমে স্ক্রীনের বাইরে (
left: -300px;) অবস্থানে থাকে। - @keyframes slideIn: অ্যানিমেশনটি 1 সেকেন্ডের মধ্যে উপাদানটিকে ডানদিকে স্লাইড করে এনে তার মূল অবস্থানে নিয়ে আসে।
obwohl Pure.CSS নিজে সরাসরি অ্যানিমেশন ক্লাস প্রদান করে না, তবে আপনি CSS Transitions এবং CSS Animations ব্যবহার করে সহজেই অ্যানিমেশন যোগ করতে পারেন। এই অ্যানিমেশনগুলি Pure.CSS এর অন্যান্য স্টাইলিং উপাদানগুলির সাথে মিলে ওয়েব পেজে ডাইনামিক এবং আকর্ষণীয় ইন্টারঅ্যাকশন তৈরি করতে সহায়তা করবে।
Read more
