এইচটিএমএল ভাষা ওয়েব পৃষ্ঠার কাঠামো প্রদান করে, এবং CSS সেই অ্যাপ্লিকেশনটির নকশা এবং বিন্যাস প্রদান করে। এই সংমিশ্রণটি আপনাকে অ্যানিমেশন যুক্ত করার অনুমতি দেয়, কারণ অ্যানিমেটেড উপাদানগুলি স্ট্যাটিক উপাদানগুলির তুলনায় আরও আকর্ষণীয় দেখায়। এটি একটি উপাদানকে ধীরে ধীরে তার শৈলী পরিবর্তন করতে দেয়।
এই নিবন্ধটি নির্দেশ করবে কিভাবে আমরা উপাদানগুলিতে অ্যানিমেশন প্রয়োগ করতে পারি। সুতরাং, শুরু করা যাক!
CSS অ্যানিমেশন কীফ্রেম কি?
অ্যানিমেশনটি সম্পন্ন করার জন্য, আমাদের অবশ্যই অ্যানিমেশনটিকে HTML উপাদানের সাথে আবদ্ধ করতে হবে। এই উদ্দেশ্যে, কীওয়ার্ড ব্যবহার করুন ' @কীফ্রেম ” এর পরে অ্যানিমেশনের নাম। এই উপাদানটি অ্যানিমেশনের শুরু এবং শেষ নির্দিষ্ট করে।
কিভাবে CSS অ্যানিমেশন কীফ্রেম সেট আপ করবেন?
CSS-এ অ্যানিমেশন কীফ্রেম সেট আপ করতে, আমরা দুটি উদাহরণ দিয়ে যাব।
উদাহরণ 1
CSS-এ অ্যানিমেশন কীফ্রেম সেট আপ করার জন্য, নিম্নলিখিত পদক্ষেপগুলি সম্পাদন করুন:
-
- ক্লাস নাম সহ একটি যোগ করুন “ main-div ”
- ডিভের ভিতরে, ক্লাস নামের সাথে আরেকটি ডিভ যোগ করুন “ img-পেং ”
- এই img-peng div-এর ভিতরে, ছবি বসাতে
যোগ করুন। এই ট্যাগের তিনটি বৈশিষ্ট্য রয়েছে, ' src 'ইমেজ পাথ প্রদানের জন্য বৈশিষ্ট্য, ' সবকিছু ” হল বিকল্প টেক্সট যা ইমেজ প্রদর্শিত না হলে যোগ করা হয় এবং “ প্রস্থ ” চিত্রের প্রস্থ প্রদানের জন্য বৈশিষ্ট্য।
এইচটিএমএল
< div ক্লাস = 'প্রধান-বিভাগ' >
< div ক্লাস = 'img-peng' >
< img src = 'images/penguin.png' সবকিছু = 'পেঙ্গুইন' প্রস্থ = '100' >
div >
div >
.main-div {
সিএসএস
প্রস্থ: 90 % ;
উচ্চতা: 90px;
ব্যাকগ্রাউন্ড-রঙ: rgb ( 67 , 66 , 87 ) ;
মার্জিন: 20px অটো;
প্যাডিং: 10px;
}
সিএসএস-এ, ' .main-div ” ডিভ ক্লাস অ্যাক্সেস করতে যোগ করা হয়েছে। এটিতে প্রয়োগ করা বৈশিষ্ট্যগুলি নীচে ব্যাখ্যা করা হয়েছে:-
- ' প্রস্থ ' সম্পত্তি মান div এর প্রস্থ সংজ্ঞায়িত করে।
- ' উচ্চতা ডিভের উচ্চতা নির্ধারণ করতে সম্পত্তি ব্যবহার করা হয়।
- ' পেছনের রং ' সম্পত্তি উপাদানটির পটভূমিতে রঙ প্রয়োগ করে।
- ' মার্জিন ' হিসাবে সেট করা হয় ' 20px গাড়ি ”, যা উপরে এবং নীচে থেকে স্থান নির্দেশ করে এবং অটো মানে বাম এবং ডান থেকে সমান স্থান।
- ' প্যাডিং ” সম্পত্তির মান 10px হিসাবে বরাদ্দ করা হয়, যা উপাদানের বিষয়বস্তুর চারপাশে স্থান প্রয়োগ করে।
স্টাইল img-peng ক্লাস
.img-পেং {
প্রস্থ: 50px;
উচ্চতা: 100px;
অবস্থান: আপেক্ষিক;
animation: shake;
অ্যানিমেশন-সময়কাল: 2 সেকেন্ড;
অ্যানিমেশন-টাইমিং-ফাংশন: 2s;
অ্যানিমেশন-পুনরাবৃত্তি-গণনা: অসীম;
}
দ্য ' .img-পেং ” ডিভ ক্লাস অ্যাক্সেস করতে ব্যবহৃত হয়, উপরের HTML ফাইলে উল্লিখিত। এই div উপাদানটি নীচে আলোচনা করা বৈশিষ্ট্যগুলির সাথে স্টাইল করা হয়েছে:-
- ' প্রস্থ উপাদানের প্রস্থ নির্ধারণ করতে সম্পত্তির মান ব্যবহার করা হয়।
- ' উচ্চতা উপাদানের উচ্চতা নির্ধারণ করতে সম্পত্তির মান ব্যবহার করা হয়।
- ' অবস্থান 'সম্পত্তি মান নির্ধারণ করা হয়' আপেক্ষিক ”, যার মানে এটি তার স্বাভাবিক অবস্থানের তুলনায় অবস্থান করবে।
- ' অ্যানিমেশন 'নাম হিসাবে দেওয়া হয়' ঝাঁকি ” তবে প্রয়োজন অনুযায়ী অ্যানিমেশনের নাম দিতে পারেন।
- ' অ্যানিমেশন-সময়কাল ” অ্যানিমেশনের সময়কাল প্রতিনিধিত্ব করে, যা 2 সেকেন্ড।
- ' অ্যানিমেশন-টাইমিং-ফাংশন ” 2s এর একটি মান বরাদ্দ করা হয় যার অর্থ 2 সেকেন্ডের মধ্যে, অ্যানিমেশনটি সম্পন্ন হয়।
- ' অ্যানিমেশন-পুনরাবৃত্তি-গণনা ” অসীম হিসাবে সেট করা হয়েছে, যার অর্থ এই অ্যানিমেশনটি অসীম সময়ের মধ্যে ঘটবে৷
কীওয়ার্ডের সাথে এবং থেকে @কীফ্রেমগুলি সংজ্ঞায়িত করুন
@ কীফ্রেম ঝাঁকান {
থেকে {
শীর্ষ: 50px;
}
প্রতি {
মার্জিন-নিচ: 200px;
}
}
ছবিতে সেট করা অ্যানিমেশন কীফ্রেমগুলির বিবরণ নীচে তালিকাভুক্ত করা হয়েছে:-
- ' @কীফ্রেম ঝাঁকান ” @keyframes কীওয়ার্ড দ্বারা অনুসরণ করা অ্যানিমেশন নাম ঝাঁকুনি বোঝায়। এই নিয়মের মধ্যে, অ্যানিমেশনের আচরণ নির্দিষ্ট করা হয়।
- এর কোঁকড়া বন্ধনীর ভিতরে, ' থেকে ' এবং ' প্রতি ” কীওয়ার্ড অ্যানিমেশন আচরণ সংজ্ঞায়িত করতে বিভিন্ন ব্যবধান নির্দিষ্ট করে।
- দ্য ' শীর্ষ ” প্রপার্টি 50px এর মান নির্ধারণ করা হয়, যার মানে অ্যানিমেশনটি স্ক্রীনের উপরের দিক থেকে 50px থেকে শুরু হয় এবং নীচে 200px পর্যন্ত চলতে থাকে।
ফলস্বরূপ, আপনি নিম্নলিখিত আউটপুট দেখতে পাবেন:
এখন, অ্যানিমেশন বিভিন্ন বিরতিতে ভিন্নভাবে আচরণ করা যাক। এটি করতে, @keyframes-এ অ্যানিমেশন শতাংশ ব্যবহার করুন।শতাংশ সহ @keyframes নির্দিষ্ট করুন
@ কীফ্রেম ঝাঁকান {
0 % {
বাম: -50px ;
}
25 % {
বাম: 50px;
}
পঞ্চাশ % {
বাম: -25px ;
}
75 % {
বাম: 25px;
}
100 % {
বাম: 10px;
}
}
সুতরাং, উপরের কোড স্নিপেটের বিবরণ এখানে উল্লেখ করা হয়েছে:-
- শতাংশের মান 0%, 25%, 50%, 75% এবং 100% বিভিন্ন বিরতিতে অ্যানিমেশনকে উপস্থাপন করে।
- তদুপরি, 0% এ, চিত্রের বামদিকে স্থান হবে “ -50px ” 25% এ, বাম দিকের স্থান হবে ' 50px ” 50% এ, বাম দিকের স্থান হবে ' -25px ” 75% এ, বাম স্থান হবে ' 25px ', এবং যখন অ্যানিমেশন সম্পূর্ণ হবে (100%), বাম স্থান হবে ' 10px ”
উপরের কোড নিম্নলিখিত অ্যানিমেশন প্রদর্শন করে:
আসুন আমরা চিত্রগুলিতে কীভাবে অ্যানিমেশন সেট করতে পারি তা দেখতে আরেকটি উদাহরণ নেওয়া যাক।উদাহরণ 2
এইচটিএমএল-এ, একটি
যোগ করুন যার ক্লাসের নাম “ প্রধান পাতা ” এইউপাদানের ভিতরে, ক্লাস সহ আরও দুটি ডিভ ট্যাগ রাখুন “ মেঘ1 ' এবং ' মেঘ2 ”, যথাক্রমে।এইচটিএমএল
< div ক্লাস = 'প্রধান পাতা' >
< div ক্লাস = 'মেঘ ১' >> div >
< div ক্লাস = 'ক্লাউড 2' >> div >
div >
শরীর {
সিএসএস
মার্জিন: 0 ;
প্যাডিং: 0 ;
}
CSS-এ, আমরা বডি এলিমেন্টে নিম্নলিখিত CSS বৈশিষ্ট্যগুলি বরাদ্দ করব:-
- ' মার্জিন ” 0 হিসাবে বৈশিষ্ট্য উপাদানটির চারপাশে কোনও স্থান নির্দিষ্ট করে না।
- ' প্যাডিং ” মান 0 সহ বৈশিষ্ট্য উপাদানটির বিষয়বস্তুর চারপাশে কোনও স্থান নির্দিষ্ট করে না।
শৈলী প্রধান পৃষ্ঠা বিভাগ
.প্রধান পাতা {
ব্যাকগ্রাউন্ড-ইমেজ: url ( / ছবি / wolf-night.png ) ;
background-repeat: no-repeat;
ব্যাকগ্রাউন্ড-সাইজ: কভার;
উচ্চতা: 100vh;
অবস্থান: আপেক্ষিক;
যথোপযুক্ত সৃষ্টিকর্তা;
}
এখানে:-
- ' .প্রধান পাতা ” div ক্লাস অ্যাক্সেস করতে ব্যবহৃত হয়।
- ' ব্যাকগ্রাউন্ড-ইমেজ 'সম্পত্তি মান নির্ধারণ করা হয়' url(/images/wolf-night.png) ” যেখানে ইমেজ হল সেই ফোল্ডার যা ইমেজ wolf-night.png ধারণ করে।
- ' পটভূমি পুনরাবৃত্তি 'সম্পত্তি মান নির্ধারণ করা হয়' no-পুনরাবৃত্তি , যার মানে চিত্রটি একবার প্রদর্শিত হবে।
- ' ব্যাকগ্রাউন্ড সাইজ 'একটি হিসাবে সেট করা হয়' আবরণ ” সম্পূর্ণ ডিভ উপাদান পূরণ করতে।
- ' উচ্চতা ” হল 100vh যা ভিউপোর্টের উচ্চতার 100%।
- ' অবস্থান ' আপেক্ষিক হিসাবে চিত্রের অবস্থান তার বর্তমান অবস্থানের সাথে সম্পর্কিত।
- ' উপচে পড়া ' সম্পত্তির মান চিত্রের অংশটি লুকানোর জন্য লুকানো হিসাবে সেট করা হয়েছে যা কন্টেইনারে ফিট করার জন্য খুব বড়।
স্টাইল ক্লাউড 1 ক্লাস
.Cloud1 {
ব্যাকগ্রাউন্ড-ইমেজ: url ( / ছবি / cloud.png ) ;
ব্যাকগ্রাউন্ড-সাইজ: থাকে;
background-repeat: no-repeat;
অবস্থান: পরম;
শীর্ষ: 100px;
প্রস্থ: 500px;
উচ্চতা: 300px;
অ্যানিমেশন: cloudanimation1;
অ্যানিমেশন-সময়কাল: 70s;
অ্যানিমেশন-পুনরাবৃত্তি-গণনা: অসীম;
}
ডিভ ক্লাস ক্লাউড 1 নিম্নলিখিত ব্যাখ্যা করা বৈশিষ্ট্যগুলির সাথে প্রয়োগ করা হয়েছে:-
- ' .Cloud1 ” ডিভ ক্লাস ক্লাউড 1 অ্যাক্সেস করতে ব্যবহৃত হয়।
- ' ব্যাকগ্রাউন্ড-ইমেজ ” প্রপার্টিটি url(/images/cloud.png) হিসাবে সেট করা হয়েছে, যেখানে ইমেজ ক্লাউড.png ইমেজ ধারণকারী ফোল্ডার।
- ' ব্যাকগ্রাউন্ড সাইজ 'মান সহ' ধারণ ” ছবির দৃশ্যমানতা নিশ্চিত করে।
- ' পটভূমি পুনরাবৃত্তি ' মান সহ সম্পত্তি ' হিসাবে সেট করা no-পুনরাবৃত্তি ” চিত্রটিকে অ-পুনরাবৃত্ত হিসাবে প্রদর্শন করে।
- ' অবস্থান ' পরম অবস্থান হিসাবে চিত্রটিকে তার পিতামাতার উপাদানের সাথে সম্পর্কিত করে৷
- ' শীর্ষ ” সম্পত্তি উপরের থেকে 100px এ ছবিটি সেট করে।
- ' প্রস্থ div উপাদানের প্রস্থ 500px সেট করার জন্য সম্পত্তি ব্যবহার করা হয়।
- ' উচ্চতা ডিভ উপাদানের উচ্চতা 300px সেট করার জন্য সম্পত্তি ব্যবহার করা হয়।
- ' অ্যানিমেশন ”কে ক্লাউডঅ্যানিমেশন১ নাম দেওয়া হয়েছে।
- ' অ্যানিমেশন-সময়কাল ” অ্যানিমেশনের সময়কাল প্রতিনিধিত্ব করে, যা 70 সেকেন্ড।
- ' অ্যানিমেশন-পুনরাবৃত্তি-গণনা ” মান অসীম বরাদ্দ করা হয়, যা অ্যানিমেশনকে অসীম বার পুনরাবৃত্তি করবে।
এখন পর্যন্ত, আমরা ডিভ ক্লাস মেইন-পেজ এবং ক্লাউড 1-এ CSS বৈশিষ্ট্য প্রয়োগ করেছি। এখন, পরবর্তী বিভাগে, আমরা ক্লাউড 2 নামে পরবর্তী ডিভ ক্লাস স্টাইল করব।
স্টাইল ক্লাউড 2 ক্লাস
.Cloud2 {
ব্যাকগ্রাউন্ড-ইমেজ: url ( / ছবি / cloud.png ) ;
ব্যাকগ্রাউন্ড-সাইজ: থাকে;
background-repeat: no-repeat;
অবস্থান: পরম;
শীর্ষ: 50px;
প্রস্থ: 200px;
উচ্চতা: 300px;
অ্যানিমেশন: cloudanimation2;
অ্যানিমেশন-সময়কাল: 15 সেকেন্ড;
অ্যানিমেশন-পুনরাবৃত্তি-গণনা: অসীম;
}
ডিভ ক্লাস ক্লাউড 2 নিম্নলিখিত বৈশিষ্ট্যগুলির সাথে প্রয়োগ করা হয়েছে যা নীচে ব্যাখ্যা করা হয়েছে:-
- ' .Cloud2 ” ক্লাস ক্লাউড 2 অ্যাক্সেস করতে ব্যবহৃত হয়।
- ' ব্যাকগ্রাউন্ড-ইমেজ ” প্রপার্টি url(/images/cloud.png) হিসাবে সেট করা হয়েছে, যেখানে ইমেজ হল একটি ফোল্ডার যাতে ইমেজ cloud.png রয়েছে।
- ' ব্যাকগ্রাউন্ড সাইজ ” একটি মান ধারণ করে ছবির দৃশ্যমানতা নিশ্চিত করে।
- ' পটভূমি পুনরাবৃত্তি নো-রিপিট হিসাবে সেট করা মান সহ বৈশিষ্ট্য চিত্রটিকে নন-রিপিট হিসাবে প্রদর্শন করে।
- ' অবস্থান ' পরম অবস্থান হিসাবে চিত্রটিকে তার পিতামাতার উপাদানের সাথে সম্পর্কিত করে৷
- ' শীর্ষ ” সম্পত্তি উপরের থেকে 100px এ ছবিটি সেট করে।
- ' প্রস্থ div উপাদানের প্রস্থ সেট করতে সম্পত্তি ব্যবহার করা হয়।
- ' উচ্চতা div উপাদানের উচ্চতা সেট করতে সম্পত্তি ব্যবহার করা হয়।
- ' অ্যানিমেশন ”কে ক্লাউডঅ্যানিমেশন২ নাম দেওয়া হয়েছে।
- ' অ্যানিমেশন-সময়কাল ” অ্যানিমেশনের সময়কাল প্রতিনিধিত্ব করে।
- ' অ্যানিমেশন-পুনরাবৃত্তি-গণনা ” মান অসীম বরাদ্দ করা হয়, যা অ্যানিমেশনকে অসীম বার পুনরাবৃত্তি করবে।
ক্লাউডঅ্যানিমেশন1 এর জন্য @কীফ্রেমগুলি নির্দিষ্ট করুন
@ কীফ্রেম ক্লাউড অ্যানিমেশন 1 {
প্রতি {
বাম: 0px;
}
থেকে {
বাম: 100 % ;
}
}
ক্লাউড 1 ডিভ অ্যানিমেশনের সাথে আবদ্ধ যা নীচে বর্ণিত হয়েছে:-
- ' @কীফ্রেম ক্লাউড অ্যানিমেশন1 ” অ্যানিমেশন ক্লাউডঅ্যানিমেশন 1 এর নামটি @keyframes কীওয়ার্ড দ্বারা অনুসরণ করা হয় যা স্থানান্তর নির্দিষ্ট করতে ব্যবহৃত হয়।
- @keyframes কীওয়ার্ডটি ক্লাউড ইমেজে শুরু থেকে শেষ পর্যন্ত অ্যানিমেশন কীভাবে করা হয় তা নির্দিষ্ট করে।
- দ্য ' প্রতি ' এবং ' থেকে ” কীওয়ার্ডগুলি নির্দিষ্ট করে ক্লাউড1 100% থেকে স্ক্রিনের 0px-এ চলে যাবে।
Cloudanimation2 এর জন্য @keyframes নির্দিষ্ট করুন
@ কীফ্রেম ক্লাউড অ্যানিমেশন2 {
0 % {
বাম: 0 % ;
}
100 % {
বাম: 100 % ;
}
}
ডিভ ক্লাস ক্লাউড 2 অ্যানিমেশনের সাথে যুক্ত যা নীচে ব্যাখ্যা করা হয়েছে:-
- ' @কীফ্রেম ক্লাউডঅ্যানিমেশন২ ” অ্যানিমেশনের নাম ক্লাউডঅ্যানিমেশন2 প্রতিনিধিত্ব করে যার পরে @keyframes কীওয়ার্ডটি অ্যানিমেশন নির্দিষ্ট করতে ব্যবহৃত হয়।
- দ্য ' 0% ' এবং ' 100% ” অ্যানিমেশনের শুরু এবং শেষ প্রতিনিধিত্ব করে।
- অ্যানিমেশনের 0% এ, ক্লাউডটি 0% হিসাবে সেট করা মান সহ বাম দিকে থাকবে এবং এটি ধীরে ধীরে প্রস্থের 100% এ চলে যাবে।
আউটপুট
চমৎকার! আমরা আলোচনা করেছি কিভাবে আমরা সফলভাবে @keyframes কীওয়ার্ড ব্যবহার করে উপাদানগুলিতে অ্যানিমেশন নির্দিষ্ট করতে পারি।উপসংহার
CSS আমাদেরকে HTML উপাদানে শৈলী প্রয়োগ করার অনুমতি দেয়। CSS-এর অ্যানিমেশন এক স্টাইল থেকে অন্য স্টাইল ট্রানজিশন করে। এটি দুটি উপাদান নিয়ে গঠিত, অ্যানিমেশন শৈলী এবং কীফ্রেম। অ্যানিমেশন শৈলী বিভিন্ন বৈশিষ্ট্যের প্রতিনিধিত্ব করে যেমন তাদের নাম, অ্যানিমেশন-সময়কাল, অ্যানিমেশন-পুনরাবৃত্তি-গণনা এবং আরও অনেক কিছু। যেখানে কীফ্রেম উপাদান অ্যানিমেশনের শুরু এবং শেষ নির্ধারণ করে। এই নির্দেশিকাটি উদাহরণ সহ অ্যানিমেশন কীফ্রেমগুলি কীভাবে সেট আপ করতে হয় তা বিশদভাবে বর্ণনা করেছে।
- ক্লাস নাম সহ একটি