কিভাবে একই সময়ে একাধিক CSS অ্যানিমেশন খেলবেন?

এই নিবন্ধটি একই সময়ে একাধিক CSS অ্যানিমেশন খেলা/যোগ করার জন্য একটি ব্যবহারিক প্রদর্শন প্রদর্শন করে।

কিভাবে একই সময়ে একাধিক CSS অ্যানিমেশন খেলবেন?

একই সময়ে একাধিক CSS অ্যানিমেশন প্রয়োগ করে, বিকাশকারীরা সহজেই আরও আকর্ষক ইন্টারফেস তৈরি করতে পারে। একই সময়ে অনেকগুলি CSS অ্যানিমেশন চালাতে, প্রত্যেকটিকে একটি অনন্য নাম দিন এবং সেই নামগুলি পৃষ্ঠায় একই বা পৃথক উপাদানগুলিতে প্রয়োগ করুন৷

একই সময়ে একাধিক অ্যানিমেশন খেলতে/যোগ করতে নিচের পদ্ধতি অনুসরণ করুন।

ধাপ 1: কাঠামো তৈরি

প্রথমত, একটি HTML উপাদান তৈরি করুন যাতে অ্যানিমেশনগুলি আসন্ন ধাপে প্রয়োগ করা হয়। উদাহরণস্বরূপ, চিত্রটি সন্নিবেশ করা হবে:

উপরের কোড স্নিপেটে:

• প্রথমে, চিত্রের পথটি 'এ সেট করা হয়েছে src ” বৈশিষ্ট্য।
• এর পরে, 'এর মান 100px ' CSS 'প্রস্থ' এবং 'উচ্চতা' বৈশিষ্ট্যে প্রদান করা হয়।
• এছাড়াও, 'এর মান সেট করুন অ্যানিমেট 'এর কাছে' ক্লাস ” বৈশিষ্ট্য।

ধাপ 2: অ্যানিমেশন সেট আপ করা

দ্য ' কীফ্রেম ” ওয়েবপেজের প্রয়োজন অনুযায়ী কাস্টম অ্যানিমেশন তৈরি করতে ব্যবহার করা হয়। উদাহরণস্বরূপ, নীচের কোড স্নিপেটে দুটি অ্যানিমেশন তৈরি করা হয়েছে:

উপরের কোড স্নিপেটে:

• প্রথমত, ' @-ওয়েবকিট-কীফ্রেম 'মেকানিজম সেট আপ করার জন্য ব্যবহার করা হচ্ছে' স্পিন ' এবং ' আবর্তিত 'নামকৃত অ্যানিমেশন।
• পরবর্তী, ব্যবহার করুন ' রূপান্তর 'সম্পত্তি যার একটি মান আছে' আবর্তিত() ' মধ্যে ' স্পিন 'অ্যানিমেশন বডি। এই ফাংশনটি উপাদানটিকে “এর কোণে ঘোরায় 180 ডিগ্রী ”
• এর পরে, অ্যানিমেশনটি সেট করুন যা মূল উপাদানটি “এর একটি ফ্যাক্টর দ্বারা বৃদ্ধি বা প্রসারিত করে 1 'উভয়টিতে' এক্স ' এবং ' এবং 'এ অক্ষ' স্কেল 'অ্যানিমেশন বডি।

ধাপ 3: HTML এলিমেন্টে অ্যানিমেশন প্রয়োগ করা

CSS অংশের ভিতরে, ক্লাস নির্বাচন করুন “ অ্যানিমেট 'যা বরাদ্দ করা হয়' ট্যাগ করুন এবং নিম্নলিখিত CSS বৈশিষ্ট্যগুলি প্রদান করুন:

উপরের কোড ব্লকে ব্যবহৃত বৈশিষ্ট্যের বর্ণনা:

• প্রথমে, “এর মান সেট করুন পরম 'সিএসএসে' অবস্থান 'সম্পত্তি। এটি সারিবদ্ধ করে ' img অ্যানিমেশন অনুযায়ী উপাদান।
• তারপর, 'এর মান প্রদান করুন ৬০% ', ' 110px ' এবং ' 110px 'সিএসএসে' বাম ', ' প্রস্থ ' এবং ' উচ্চতা ' বৈশিষ্ট্য। এই বৈশিষ্ট্যগুলি একটি উপাদানের অবস্থান এবং আকার সেট করতে ব্যবহার করা হয়।
• এর পরে, 'এর মান সেট করুন স্কেল 3s ​​অসীম রৈখিক 'এর কাছে' -ওয়েবকিট-অ্যানিমেশন 'সিএসএস সম্পত্তি।
• এবং ' 3s ' সেই অ্যানিমেশনের সময়কাল, ' অসীম ' হল অ্যানিমেশনের সময়কাল, এবং ' রৈখিক ” হল অ্যানিমেশনের দিক।
• শেষ পর্যন্ত, 'এর মান প্রদান করুন স্পিন 2s অসীম রৈখিক 'সিএসএসে' -ওয়েবকিট-অ্যানিমেশন 'সম্পত্তি। এই সম্পত্তি 'নামক দ্বিতীয় অ্যানিমেশন যোগ করে স্পিন ' উপরে ' img ' উপাদান।

উপরের কোড ব্লকের সংকলনের পরে, অ্যানিমেশনটি এইরকম দেখায়:

উপরের জিআইএফটি ব্যাখ্যা করে যে শুধুমাত্র ' স্পিন অ্যানিমেশন টার্গেটেড এলিমেন্টে বাজছে।

ধাপ 4: HTML এলিমেন্টে একাধিক অ্যানিমেশন খেলা

উপরের ধাপের মতো, উপাদানটিতে শুধুমাত্র একটি অ্যানিমেশন প্রয়োগ করা হয়েছে। এর কারণ হল একই “এ একাধিক মান বরাদ্দ করা হয়েছে -ওয়েবকিট-অ্যানিমেশন 'সম্পত্তি।

এই সমস্যাটি সমাধান করতে, লক্ষ্য উপাদানটিকে অন্য HTML উপাদান দিয়ে মোড়ানো। হিসাবে ' div ” ইতিমধ্যেই প্রথম ধাপে একটি মোড়ক হিসাবে ব্যবহার করা হয়েছে, এটি নির্বাচন করুন স্প্যান এবং কোড আপডেট করুন যেমন:

উপরের কোডে:

• প্রথমে, ' অ্যানিমেট ' ক্লাস একই থাকে এবং শুধুমাত্র দ্বিতীয় অ্যানিমেশনটি এটি থেকে সরানো হয় যা ' স্প্যান 'শ্রেণী।
• এর পরে, ' ব্যবহার করে অবস্থান নির্ধারণ করুন অবস্থান ' এবং ' শীর্ষ ' বৈশিষ্ট্য।

উপরের কোড স্নিপেটটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এখন এইরকম প্রদর্শিত হবে:

আউটপুট দেখায় যে উভয় অ্যানিমেশন একই সময়ে নির্বাচিত HTML উপাদানে প্রয়োগ করা হয়েছে।

উপসংহার

একাধিক CSS বৈশিষ্ট্য প্রয়োগ করতে, উপাদানটিকে HTML উপাদান দিয়ে মুড়ে দিন এবং সেগুলিতে অ্যানিমেশন প্রয়োগ করুন যাতে প্রতিটি HTML উপাদান একটি একক অ্যানিমেশন ধারণ করে৷ যেহেতু চাইল্ড প্রপার্টি প্যারেন্ট এইচটিএমএল এলিমেন্টে প্রয়োগ করা অ্যানিমেশন উত্তরাধিকার সূত্রে প্রাপ্ত হয়, কম্পাইলারের জন্য ত্রুটি বা অস্পষ্টতা সৃষ্টি না করে একাধিক অ্যানিমেশন প্রয়োগ করা হয়। এটি একই সময়ে একাধিক CSS অ্যানিমেশন খেলা/যোগ করার পদ্ধতি।