কিভাবে সিএসএস কীফ্রেম অ্যানিমেশন তৈরি করবেন

সিএসএস ডেভেলপারদের তাদের ওয়েব পেজগুলোকে কীফ্রেম অ্যানিমেশন ব্যবহার করে জীবন্ত করার ক্ষমতা দেয়।

CSS অ্যানিমেশন একটি এইচটিএমএল এলিমেন্টের প্রাথমিক অবস্থাকে তার বিভিন্ন বৈশিষ্ট্যের মাধ্যমে পরিবর্তন করে অর্জন করা হয়। কিছু সাধারণ CSS বৈশিষ্ট্য যা অ্যানিমেটেড হতে পারে তার মধ্যে রয়েছে:

---

---

কিভাবে ল্যাপটপে গেম দ্রুত চালানো যায়

• প্রস্থ
• উচ্চতা
• অবস্থান
• রঙ
• অস্বচ্ছতা

এই সাধারণ সিএসএস বৈশিষ্ট্যগুলি নির্দিষ্ট সিএসএস উপাদানগুলি দ্বারা পছন্দসই ফলাফল তৈরি করতে পরিচালিত হয়। আপনি যদি কখনও একটি ওয়েব পৃষ্ঠায় একটি অ্যানিমেটেড উপাদান জুড়ে এসেছেন, সম্ভাবনা হল যে উপাদানটি কীফ্রেম অ্যানিমেশন ব্যবহার করে অ্যানিমেটেড ছিল।

কীফ্রেমস এলিমেন্ট কি?

দ্য কীফ্রেম উপাদান এটি এক বা একাধিক এইচটিএমএল এলিমেন্টে ব্যবহার করা যেতে পারে যার অ্যাক্সেস আছে। এটি একটি মৌলিক অবস্থার একটি নির্দিষ্ট বিন্দু চিহ্নিত করে এবং এই উপাদানটির এই সময়ে উপস্থিত হওয়াকে নির্দেশ করে।

এটি অনেকটা হজমের মতো মনে হতে পারে, কিন্তু এটি আসলে বেশ সহজ। দ্য কীফ্রেম উপাদান একটি সুন্দর সোজা কাঠামো রয়েছে যা সহজেই বোঝা যায় এবং যে কোনও অ্যানিমেশনের প্রয়োজনীয়তার সাথে সামঞ্জস্য করা যায়।

Keyframes গঠন উদাহরণ


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

ধরা যাক আপনি একটি সবুজ আয়তক্ষেত্রাকার বোতামটিকে নীল গোল বোতামে পরিণত করে অ্যানিমেট করতে চান।

এর পরামিতিগুলির মধ্যে থেকে উপরের অংশটি আপনাকে সবুজ স্টাইলিং স্থাপন করতে হবে যাতে উপাদানটি সবুজ আয়তক্ষেত্রাকার বোতামের মতো দেখা যায়, তারপরে প্রতি বিভাগে, আপনি এই বোতামটিকে একটি নীল গোল বোতামে রূপান্তর করার জন্য সমস্ত স্টাইলিং প্রয়োজনীয়তা রাখবেন।

---

---

আপনি যদি ভাবছেন, এটি অ্যানিমেশনের মতো খুব বেশি শোনাচ্ছে না। ঠিক আছে, কারণ এই পুরো প্রক্রিয়াটির একটি মূল উপাদান এখনও চালু করা হয়নি --- এই উপাদানটি অ্যানিমেশন সম্পত্তি।

অ্যানিমেশন সম্পত্তি

দ্য অ্যানিমেশন সম্পত্তি বিভিন্ন উপ-বৈশিষ্ট্যের একটি সেট আছে; কাঙ্ক্ষিত এইচটিএমএল এলিমেন্টকে অ্যানিমেট করার জন্য উপরের কীফ্রেম স্ট্রাকচারের সাথে এগুলো ব্যবহার করা হয়।

---

---

যাইহোক, আপনার প্রকল্পগুলিতে অ্যানিমেশন অর্জনের জন্য আপনাকে কেবল এই পাঁচটি উপ-বৈশিষ্ট্য এবং তাদের সাথে যুক্ত মানগুলি জানতে হবে। এই বৈশিষ্ট্যগুলি হিসাবে পরিচিত:

• অ্যানিমেশন-নাম
• অ্যানিমেশন-সময়কাল
• অ্যানিমেশন-টাইমিং-ফাংশন
• অ্যানিমেশন-বিলম্ব
• অ্যানিমেশন-পুনরাবৃত্তি-গণনা

একটি ওয়েব পেজে অ্যানিমেশন ব্যবহার করা

উপরের দৃশ্যকল্প ব্যবহার করে, লক্ষ্য একটি অ্যানিমেটেড বোতাম তৈরি করা।

বোতাম অ্যানিমেশন উদাহরণ







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!




উপরের কোডের অ্যানিমেশন বিভাগে পাঁচটি উপ-বৈশিষ্ট্য রয়েছে যা আগে উল্লেখ করা হয়েছিল। প্রতিটি সম্পত্তির একটি খুব স্বতন্ত্র ফাংশন রয়েছে এবং তারা একসঙ্গে যে কোন HTML উপাদানকে লক্ষ্যবস্তু করার জন্য তৈরি করা হয়।

সম্পর্কিত: কিভাবে CSS নির্বাচক ব্যবহার করে একটি ওয়েব পেজের অংশকে টার্গেট করা যায়

অ্যানিমেশন-নাম সম্পত্তি

এই সম্পত্তি তালিকার সবচেয়ে গুরুত্বপূর্ণ সম্পত্তি। ছাড়া অ্যানিমেশন-নাম সম্পত্তি , অতীতে আপনার কোন সনাক্তকারী থাকবে না কীফ্রেম উপাদান , তার প্যারামিটারের মধ্যে সমস্ত কোড রেন্ডারিং অকেজো।

যদি আপনি অন্যান্য উপ-বৈশিষ্ট্যগুলির মধ্যে একটি বা দুটি অন্তর্ভুক্ত করতে ভুলে যান তবে আপনার এখনও মোটামুটি শালীন অ্যানিমেশন থাকতে পারে। যাইহোক, যদি আপনি ভুলে যান অ্যানিমেশন-নাম সম্পত্তি আপনার কোন অ্যানিমেশন থাকবে না।

অ্যানিমেশন-সময়কালের সম্পত্তি

এই সম্পত্তি একটি রাষ্ট্র থেকে অন্য রাজ্যে স্থানান্তর করার সময় একটি অ্যানিমেটেড উপাদান কত সময় নিতে হবে তা নির্ধারণ করতে ব্যবহৃত হয়।

উপরের উদাহরণে, অ্যানিমেশন-সময়কালের সম্পত্তি এটি 5 সেকেন্ড (5 সেকেন্ড) এ সেট করা আছে, তাই সবুজ আয়তক্ষেত্রাকার বোতামটি সম্পূর্ণ 5 সেকেন্ডের আগে এটি সম্পূর্ণ নীল গোল বোতাম হয়ে যাবে।

অ্যানিমেশন-বিলম্ব সম্পত্তি

একটি কারণে এই সম্পত্তি গুরুত্বপূর্ণ; কিছু ওয়েব পেজ সম্পূর্ণ লোড হতে কয়েক সেকেন্ড সময় নিতে পারে (বিভিন্ন কারণের কারণে)। তাহলে অ্যানিমেশন-বিলম্ব সম্পত্তি ওয়েব পেজ লোড হতে কিছুটা সময় লাগলে অ্যানিমেশন অবিলম্বে শুরু হতে বাধা দেয়।

উপরের উদাহরণে, অ্যানিমেশন-বিলম্ব সম্পত্তি 4s তে সেট করা হয়েছে, যার মানে হল যে ওয়েবপৃষ্ঠাটি দেখার পর 4 সেকেন্ড পর্যন্ত অ্যানিমেশন শুরু হবে না (অ্যানিমেশন শুরু হওয়ার আগে ওয়েব পেজটি লোড করার জন্য যথেষ্ট সময় দেয়)।

অ্যানিমেশন-পুনরাবৃত্তি-গণনা সম্পত্তি

এই সম্পত্তি বলে যে অ্যানিমেটেড উপাদানটি কতবার এক রাজ্য থেকে অন্য রাজ্যে স্থানান্তরিত হওয়া উচিত। দ্য অ্যানিমেশন-পুনরাবৃত্তি-গণনা সম্পত্তি শব্দ এবং সংখ্যা মান গ্রহণ করে। সংখ্যা মান 1 থেকে উপরের দিকে কিছু হতে পারে, যখন শব্দের মান সাধারণত থাকে অসীম ।

উপরের উদাহরণে, অ্যানিমেশন-পুনরাবৃত্তি-গণনা মান তৈরি অসীম , যার মানে হল যে যতক্ষণ পর্যন্ত ওয়েব পেজটি বাটনে আছে ততক্ষণ পর্যন্ত বাটন প্রপার্টি এক রাজ্য থেকে অন্য রাজ্যে সজীব হবে।

অ্যানিমেশন-টাইমিং-ফাংশন প্রপার্টি

এই সম্পত্তি অ্যানিমেটেড উপাদানটির গতি নির্দেশ করে কারণ এটি এক অবস্থা থেকে অন্য রাজ্যে স্থানান্তরিত হয়। দ্য অ্যানিমেশন-টাইমিং-ফাংশন প্রপার্টি সাধারণত তিনটি সহজ মানের মধ্যে একটি নির্ধারিত হয়।

• সহজ-ইন
• সহজ-আউট
• সহজ-ইন-আউট

দ্য সহজ-ইন-আউট মান উপরে ব্যবহার করা হয়; এটি আস্তে আস্তে অ্যানিমেশনকে এক রাজ্য থেকে অন্য রাজ্যে স্থানান্তরিত করে। যদি লক্ষ্যটি একটি ধীর গতিতে পরিবর্তন করা হয় যখন বোতামটি একটি সবুজ আয়তক্ষেত্র থেকে একটি নীল বৃত্তে রূপান্তরিত হয় আপনি ব্যবহার করবেন সহজে মূল্য । যদি আপনি শুধুমাত্র বিপরীত দিকে ধীর পরিবর্তন চান তাহলে আপনি সহজ-আউট মান ।

আমাদের কোড কমানো

বেশিরভাগ ক্ষেত্রে, একটি প্রোগ্রামের দৈর্ঘ্য হ্রাস করা একটি ব্যবহারিক পদ্ধতি হিসাবে দেখা হয়। এটি মূলত কারণ কোডের কম লাইনগুলি আপনার প্রোগ্রামগুলিতে ত্রুটিগুলির সম্ভাবনা কমিয়ে দেয়।

উপরের কোডটি চার লাইন দ্বারা কমানো যেতে পারে। এটি কেবলমাত্র অ্যানিমেশন সম্পত্তি ব্যবহার করে এর প্রতিটি উপ-বৈশিষ্ট্যকে স্পষ্টভাবে সনাক্ত না করে অর্জন করা যেতে পারে।

বোতাম অ্যানিমেশনের জন্য কোড কমানো উদাহরণ







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}