এইটো কল্পনা কৰক: আপুনি এটা নতুন প্ৰকল্পত যোগদান কৰে, ক'ডবেছত ডুব যায়, আৰু প্ৰথম কেইঘণ্টামানৰ ভিতৰতে, আপুনি হতাশাজনকভাৱে চিনাকি কিবা এটা আৱিষ্কাৰ কৰে। শৈলীপত্ৰিকাসমূহত সিঁচৰতি হৈ আছে, আপুনি একে মূল এনিমেচনসমূহৰ বাবে একাধিক @keyframes সংজ্ঞা পাব। তিনিটা ভিন্ন ফেড-ইন ইফেক্ট, দুটা বা তিনিটা স্লাইড ভেৰিয়েচন, এমুঠিমান জুম এনিমেচন, আৰু অন্ততঃ দুটা ভিন্ন স্পিন এনিমেচন কাৰণ, ভাল, কিয় নহয়? @keyframes পালছ { { ৰ পৰা স্কেল: ১; } to { স্কেল: ১.১; } }
@keyframes ডাঙৰ-পালছ { ০%, ২০%, ১০০% { স্কেল: ১; } ১০%, ৪০% { স্কেল: ১.২; } }
যদি এই দৃশ্যপটটো চিনাকি যেন লাগে, তেন্তে আপুনি অকলশৰীয়া নহয়৷ বিভিন্ন প্ৰকল্পৰ মোৰ অভিজ্ঞতাত, মই প্ৰদান কৰিব পৰা আটাইতকৈ সামঞ্জস্যপূৰ্ণ দ্ৰুত জয়সমূহৰ ভিতৰত এটা হৈছে কিফ্ৰেমসমূহ একত্ৰিত আৰু প্ৰামাণিককৰণ। ই ইমানেই নিৰ্ভৰযোগ্য আৰ্হিত পৰিণত হৈছে যে মই এতিয়া এই পৰিষ্কাৰ-পৰিচ্ছন্নতাক যিকোনো নতুন ক’ডবেছত মোৰ প্ৰথম কামসমূহৰ ভিতৰত এটা হিচাপে আগ্ৰহী। বিশৃংখলতাৰ আঁৰৰ যুক্তি এই ৰিডাণ্ডেন্সিৰ কথা ভাবিলেই নিখুঁত যুক্তিযুক্ততা থাকে। আমি সকলোৱে আমাৰ দৈনন্দিন কামত একেবোৰ মৌলিক এনিমেচন ব্যৱহাৰ কৰো: ফেড, স্লাইড, জুম, স্পিন, আৰু অন্যান্য সাধাৰণ ইফেক্ট। এই এনিমেচনসমূহ যথেষ্ট সহজ, আৰু কামটো সম্পূৰ্ণ কৰিবলৈ এটা দ্ৰুত @keyframes সংজ্ঞা হুইপ আপ কৰাটো সহজ। এটা কেন্দ্ৰীভূত এনিমেচন চিস্টেম অবিহনে, ডেভেলপাৰসকলে স্বাভাৱিকতে এই কিফ্ৰেমসমূহ শূন্যৰ পৰা লিখে, অজ্ঞাত যে একে ধৰণৰ এনিমেচনসমূহ ইতিমধ্যে ক'ডবেছৰ অন্য ঠাইত আছে। এইটো বিশেষকৈ উপাদান-ভিত্তিক স্থাপত্যত কাম কৰাৰ সময়ত সাধাৰণ (যি আজিকালি আমাৰ বেছিভাগেই কৰে), কাৰণ দলসমূহে প্ৰায়ে এপ্লিকেচনৰ বিভিন্ন অংশত সমান্তৰালভাৱে কাম কৰে। ফলাফল? এনিমেচন বিশৃংখলতা। সৰু সমস্যাটো কিফ্ৰেম ডুপ্লিকেচনৰ সৈতে আটাইতকৈ স্পষ্ট সমস্যাসমূহ হ'ল অপচয় কৰা বিকাশৰ সময় আৰু অপ্ৰয়োজনীয় ক'ড ব্ল'ট। একাধিক কিফ্ৰেম সংজ্ঞাৰ অৰ্থ হৈছে প্ৰয়োজনীয়তাসমূহ সলনি হ'লে আপডেইট কৰিবলে একাধিক স্থান। আপোনাৰ ফেড এনিমেচনৰ সময় সামঞ্জস্য কৰিব লাগিবনে? আপুনি আপোনাৰ ক’ডবেছৰ প্ৰতিটো উদাহৰণ চিকাৰ কৰিব লাগিব৷ সহজ কৰা কাৰ্য্যসমূহ প্ৰামাণিক কৰিব বিচাৰেনে? সকলো ভিন্নতা বিচাৰি পোৱাৰ বাবে শুভকামনা থাকিল। ৰক্ষণাবেক্ষণ পইণ্টসমূহৰ এই গুণনে আনকি সৰল এনিমেচন আপডেটসমূহক এটা সময়সাপেক্ষ কাম কৰি তোলে। ডাঙৰ সমস্যাটো এই কিফ্ৰেমসমূহৰ ডুপ্লিকেচনে পৃষ্ঠৰ তলত লুকাই থকা এটা বহুত বেছি কূটনৈতিক সমস্যাৰ সৃষ্টি কৰে: গ্লোবেল স্কোপ ট্ৰেপ। আনকি উপাদান-ভিত্তিয় স্থাপত্যসমূহৰ সৈতে কাম কৰাৰ সময়ত, CSS কিফ্ৰেমসমূহ সদায় গোলকীয় পৰিসৰত সংজ্ঞায়িত কৰা হয়। ইয়াৰ অৰ্থ হৈছে সকলো কিফ্ৰেম সকলো উপাদানৰ বাবে প্ৰযোজ্য। সদায়। হয়, আপোনাৰ এনিমেচনে আপোনাৰ উপাদানত আপুনি সংজ্ঞায়িত কৰা কিফ্ৰেমসমূহ ব্যৱহাৰ কৰাটো বাধ্যতামূলক নহয়। ই শেষৰ কিফ্ৰেমসমূহ ব্যৱহাৰ কৰে যি সেই একে নামৰ সৈতে মিলে যি গোলকীয় পৰিসৰত লোড কৰা হৈছিল। যেতিয়ালৈকে আপোনাৰ সকলো কিফ্ৰেম একে, এইটো এটা সৰু সমস্যা যেন লাগিব পাৰে। কিন্তু যি মুহূৰ্তত আপুনি এটা নিৰ্দিষ্ট ব্যৱহাৰৰ ক্ষেত্ৰৰ বাবে এটা এনিমেচন কাষ্টমাইজ কৰিব বিচাৰে, আপুনি সমস্যাত পৰিছে, বা তাতোকৈ বেয়া কথাটো হ’ল, আপুনিয়েই সেইবোৰৰ কাৰণ হ’ব৷ হয় আপোনাৰ এনিমেচনে কাম নকৰে কাৰণ আপোনাৰ পিছত আন এটা উপাদান লোড হয়, আপোনাৰ কিফ্ৰেমসমূহ অভাৰৰাইট কৰে, বা আপোনাৰ উপাদান শেষত লোড হয় আৰু ভুলবশতঃ সেই কিফ্ৰেমৰ নাম ব্যৱহাৰ কৰি আন প্ৰতিটো উপাদানৰ বাবে এনিমেচন আচৰণ সলনি কৰে, আৰু আপুনি ইয়াক উপলব্ধিও নকৰিবও পাৰে। সমস্যাটো প্ৰদৰ্শন কৰা এটা সহজ উদাহৰণ দিয়া হ’ল: .উপাদান-এক { /* উপাদান শৈলী */ এনিমেচন: পালছ 1s সহজ-ইন-আউট অসীম বিকল্প; }
/* এই @keyframes সংজ্ঞাটোৱে কাম নকৰে */ @keyframes পালছ { { ৰ পৰা স্কেল: ১; } to { স্কেল: ১.১; } }
/* পিছলৈ ক'ডত... */
.উপাদান-দুটা { /* উপাদান শৈলী */ এনিমেচন: পালছ 1s সহজ-ইন-আউট অসীম; }
/* এই কিফ্ৰেম দুয়োটা উপাদানৰ বাবে প্ৰযোজ্য হ'ব */ @keyframes পালছ { ০%, ২০%, ১০০% { স্কেল: ১; } ১০%, ৪০% { স্কেল: ১.২; } }
দুয়োটা উপাদানে একেটা এনিমেচন নাম ব্যৱহাৰ কৰে, কিন্তু দ্বিতীয় @keyframes সংজ্ঞাই প্ৰথমটোক অভাৰৰাইট কৰে। এতিয়া উপাদান-এক আৰু উপাদান-দুই দুয়োটাই দ্বিতীয় কিফ্ৰেম ব্যৱহাৰ কৰিব, কোনটো উপাদানে কোনটো কিফ্ৰেম সংজ্ঞায়িত কৰিছিল সেইটো নিৰ্বিশেষে। কলম Keyframes টোকেন দেখুন - ডেমো 1 [forked] অমিত শ্বীন দ্বারা. আটাইতকৈ বেয়া কথাটো? ই প্ৰায়ে স্থানীয় বিকাশত নিখুঁতভাৱে কাম কৰে কিন্তু উৎপাদনত ৰহস্যজনকভাৱে ভাঙি যায় যেতিয়া নিৰ্মাণ প্ৰক্ৰিয়াসমূহে আপোনাৰ শৈলীপত্ৰিকাসমূহৰ লোডিং ক্ৰম সলনি কৰে। আপুনি এনিমেচনসমূহৰ সৈতে শেষ কৰে যি কোনবোৰ উপাদানসমূহ লোড কৰা হৈছে আৰু কি ক্ৰমত লোড কৰা হৈছে তাৰ ওপৰত নিৰ্ভৰ কৰি বেলেগ ধৰণে আচৰণ কৰে। সমাধান: ইউনিফাইড কীফ্ৰেম এই বিশৃংখলতাৰ উত্তৰ আচৰিত ধৰণে সহজ: এটা অংশীদাৰী শৈলীপত্ৰিকাত সংৰক্ষণ কৰা পূৰ্বনিৰ্ধাৰিত গতিশীল কিফ্ৰেমসমূহ। প্ৰতিটো উপাদানক নিজৰ এনিমেচন সংজ্ঞায়িত কৰিবলৈ দিয়াৰ পৰিৱৰ্তে, আমি কেন্দ্ৰীভূত কিফ্ৰেম সৃষ্টি কৰোঁ যিবোৰ ভালদৰে নথিভুক্ত কৰা হয়, সহজব্যৱহাৰ, ৰক্ষণাবেক্ষণযোগ্য, আৰু আপোনাৰ প্ৰকল্পৰ নিৰ্দিষ্ট প্ৰয়োজন অনুসৰি অনুকূলিত। ইয়াক কিফ্ৰেম টোকেন বুলি ভাবিব। যেনেকৈ আমি ৰং আৰু ব্যৱধানৰ বাবে টোকেন ব্যৱহাৰ কৰো, আৰু আমাৰ বহুতেই ইতিমধ্যে এনিমেচন বৈশিষ্ট্যৰ বাবে টোকেন ব্যৱহাৰ কৰো, যেনে সময়কাল আৰু সহজ কৰা ফাংচন, কিফ্ৰেমৰ বাবেও টোকেন ব্যৱহাৰ নকৰো কিয়? এই পদ্ধতিয়ে আপুনি ব্যৱহাৰ কৰা যিকোনো বৰ্তমানৰ ডিজাইন টোকেন ৱৰ্কফ্ল’ৰ সৈতে স্বাভাৱিকভাৱে সংহতি কৰিব পাৰে, একে সময়তে সৰু সমস্যা (ক’ড ডুপ্লিকেচন) আৰু ডাঙৰ সমস্যা (গোলকীয় পৰিসৰৰ সংঘাত) দুয়োটা সমাধান কৰিব পাৰে৷ ধাৰণাটো পোনপটীয়া: আমাৰ সকলো সাধাৰণ এনিমেচনৰ বাবে সত্যৰ একক উৎস সৃষ্টি কৰক। এই অংশীদাৰী ষ্টাইলশ্বীটত সযতনে নিৰ্মিত কিফ্ৰেম আছে যিয়ে আমাৰ প্ৰকল্পই প্ৰকৃততে ব্যৱহাৰ কৰা এনিমেচন আৰ্হিসমূহ সামৰি লয়। আমাৰ ক'ডবেছৰ ক'ৰবাত ইতিমধ্যে এটা ফেড এনিমেচন আছে নে নাই সেইটো আৰু অনুমান কৰা নহ'ব। অন্য উপাদানসমূহৰ পৰা আৰু ভুলবশতঃ এনিমেচনসমূহ অভাৰৰাইট কৰা নহ'ব। কিন্তু ইয়াত মূল কথাটো হ’ল: এইবোৰ কেৱল ষ্টেটিক কপি-পেষ্ট এনিমেচন নহয়। ইয়াক CSS স্বনিৰ্বাচিত বৈশিষ্ট্যসমূহৰ যোগেদি গতিশীল আৰু স্বনিৰ্বাচিত কৰিব পৰাকৈ ডিজাইন কৰা হৈছে, যাৰ ফলত আমাক নিৰ্দিষ্ট ব্যৱহাৰৰ ক্ষেত্ৰত এনিমেচনসমূহ খাপ খুৱাবলৈ নমনীয়তা থকাৰ লগতে সামঞ্জস্যতা বজাই ৰাখিব পৰা যায়, যেনে যদি আপুনি এটা ঠাইত অলপ ডাঙৰ “পালছ” এনিমেচনৰ প্ৰয়োজন হয়। প্ৰথম কীফ্ৰেম টোকেন নিৰ্মাণ কৰা আমি মোকাবিলা কৰা প্ৰথম কম ওলমি থকা ফলবোৰৰ ভিতৰত এটা হ’ল “ফেড-ইন” এনিমেচন। মোৰ শেহতীয়া প্ৰকল্পসমূহৰ এটাত, মই ডজনতকৈও অধিক পৃথক ফেড-ইন সংজ্ঞা পাইছিলোঁ, আৰু হয়, সিহঁতে সকলোৱে অস্পষ্টতাক 0 ৰ পৰা 1 লৈ এনিমেট কৰিছিল। গতিকে, এটা নতুন ষ্টাইলশ্বীট তৈয়াৰ কৰোঁ, ইয়াক kf-tokens.css বুলি কওঁ, ইয়াক আমাৰ প্ৰজেক্টলৈ আমদানি কৰোঁ, আৰু ইয়াৰ ভিতৰত সঠিক মন্তব্যৰ সৈতে আমাৰ কিফ্ৰেম ৰাখোঁ। /* কীফ্ৰেম-টোকেন.css */
/* * Fade In - ম্লান প্ৰৱেশদ্বাৰ এনিমেচন * ব্যৱহাৰ: এনিমেচন: kf-fade-in 0.3s সহজ-আউট; */ @কীফ্ৰেম kf-ফেড-ইন { { ৰ পৰা অস্পষ্টতা: 0; } to { অস্পষ্টতা: ১; } }
এই একক @keyframes ঘোষণাই আমাৰ ক'ডবেছত সিঁচৰতি হৈ থকা সকলো ফেড-ইন এনিমেচনৰ ঠাই লয়। পৰিষ্কাৰ, সহজ, আৰু বিশ্বব্যাপী প্ৰযোজ্য। আৰু এতিয়া যেতিয়া আমাৰ এই টোকেনটো সংজ্ঞায়িত কৰা হৈছে, আমি ইয়াক আমাৰ সমগ্ৰ প্ৰকল্পৰ যিকোনো উপাদানৰ পৰা ব্যৱহাৰ কৰিব পাৰো: .মডাল { এনিমেচন: kf-fade-in 0.3s সহজ-আউট; }
.tooltip { এনিমেচন: kf-fade-in 0.2s সহজ-ইন-আউট; }
.অধিসূচনা { এনিমেচন: kf-fade-in 0.5s সহজ-আউট; }
কলম Keyframes টোকেন দেখুন - ডেমো 2 [forked] অমিত শ্বীন দ্বারা. টোকা: আমি আমাৰ সকলো @keyframes নামত এটা kf- উপসৰ্গ ব্যৱহাৰ কৰিছো। এই উপসৰ্গই এটা নামস্থান হিচাপে কাম কৰে যি প্ৰকল্পত বৰ্ত্তমানৰ এনিমেচনসমূহৰ সৈতে নামকৰণৰ সংঘাত ৰোধ কৰে আৰু তৎক্ষণাত স্পষ্ট কৰে যে এই কিফ্ৰেমসমূহ আমাৰ কিফ্ৰেম টোকেন ফাইলৰ পৰা আহিছে। এটা গতিশীল স্লাইড বনোৱা kf-fade-in কিফ্ৰেমসমূহে অতি উত্তম কাম কৰে কাৰণ ই সহজ আৰু ইয়াত বস্তুবোৰ গোলমাল কৰিবলৈ ঠাই কম। অন্য এনিমেচনত, অৱশ্যে, আমি বহুত বেছি গতিশীল হ'ব লাগিব, আৰু ইয়াত আমি CSS কাষ্টম বৈশিষ্ট্যৰ বিশাল শক্তিৰ লাভ উঠাব পাৰো। এইখিনিতে কিফ্ৰেম টোকেনসমূহ সঁচাকৈয়ে সিঁচৰতি হৈ থকা স্থিতিশীল এনিমেচনসমূহৰ তুলনাত জিলিকি উঠে। এটা সাধাৰণ পৰিস্থিতি লওঁ আহক: “স্লাইড-ইন” এনিমেচন। কিন্তু ক’ৰ পৰা স্লাইড ইন? সোঁফালৰ পৰা ১০০px? বাওঁফালৰ পৰা ৫০%? পৰ্দাৰ ওপৰৰ পৰা প্ৰৱেশ কৰিব লাগেনে? নে হয়তো তলৰ পৰা ভাঁহি আহিব পাৰে? ইমানবোৰ সম্ভাৱনা, কিন্তু প্ৰতিটো দিশ আৰু প্ৰতিটো ভিন্নতাৰ বাবে পৃথক কিফ্ৰেম সৃষ্টি কৰাৰ পৰিৱৰ্তে, আমি এটা নমনীয় টোকেন নিৰ্মাণ কৰিব পাৰো যি সকলো পৰিস্থিতিৰ সৈতে খাপ খায়: /* * স্লাইড ইন - দিশগত স্লাইড এনিমেচন * দিশ নিয়ন্ত্ৰণ কৰিবলৈ --kf-slide-from ব্যৱহাৰ কৰক * অবিকল্পিত: বাওঁফালৰ পৰা স্লাইড ইন (-100%) * ব্যৱহাৰ: * এনিমেচন: kf-slide-in 0.3s সহজ-আউট; * --kf-স্লাইড-ৰ পৰা: -100px 0; // বাওঁফালৰ পৰা স্লাইড কৰক * --kf-স্লাইড-ৰ পৰা: 100px 0; // সোঁফালৰ পৰা স্লাইড কৰক * --kf-স্লাইড-ৰ পৰা: 0 -50px; // ওপৰৰ পৰা স্লাইড কৰক */
@keyframes kf-স্লাইড-ইন { { ৰ পৰা অনুবাদ কৰক: var(--kf-স্লাইড-ৰ পৰা, -100% 0); } to { অনুবাদ কৰক: 0 0; } }
এতিয়া আমি এই একক @keyframes টোকেনটো যিকোনো স্লাইড দিশৰ বাবে ব্যৱহাৰ কৰিব পাৰো কেৱল --kf-slide-from কাষ্টম বৈশিষ্ট্য সলনি কৰি: .চাইডবাৰ { এনিমেচন: kf-slide-in 0.3s সহজ-আউট; /* অবিকল্পিত মান ব্যৱহাৰ কৰে: বাওঁফালৰ পৰা স্লাইডসমূহ */ }
.অধিসূচনা { এনিমেচন: kf-slide-in 0.4s সহজ-আউট; --kf-স্লাইড-ৰ পৰা: 0 -50px; /* ওপৰৰ পৰা স্লাইড */ }
.মডাল { এনিমেচন: kf-fade-in ০.৫ছেকেণ্ড, kf-স্লাইড-ইন ০.৫s ঘন-বেজিয়াৰ(০.৩৪, ১.৫৬, ০.৬৪, ১); --kf-স্লাইড-ৰ পৰা: 50px 50px; /* তলৰ-সোঁফালৰ পৰা স্লাইড */ }
এই পদ্ধতিয়ে আমাক সামঞ্জস্য বজাই ৰাখি অবিশ্বাস্য নমনীয়তা প্ৰদান কৰে। এটা কীফ্ৰেম ঘোষণা, অসীম সম্ভাৱনা। কলম Keyframes টোকেন দেখুন - ডেমো 3 [forked] অমিত শ্বীন দ্বারা. আৰু যদি আমি আমাৰ এনিমেচনসমূহক আৰু অধিক নমনীয় কৰি তুলিব বিচাৰো, “স্লাইড-আউট” ইফেক্টৰ বাবেও অনুমতি দি, আমি পাৰিমকেৱল এটা --kf-slide-to স্বনিৰ্বাচিত বৈশিষ্ট্য যোগ কৰক, আমি পৰৱৰ্তী বিভাগত দেখাৰ দৰেই। দ্বিদিশীয় জুম কীফ্ৰেমসমূহ প্ৰকল্পসমূহৰ মাজত ডুপ্লিকেট হোৱা আন এটা সাধাৰণ এনিমেচন হ’ল “জুম” ইফেক্ট। টোষ্ট বাৰ্তাৰ বাবে এটা সূক্ষ্ম স্কেল-আপ হওক, মডালৰ বাবে এটা নাটকীয় জুম-ইন হওক, বা শিৰোনামৰ বাবে এটা কোমল স্কেল-ডাউন ইফেক্ট হওক, জুম এনিমেচন সকলোতে আছে৷ প্ৰতিটো স্কেল মানৰ বাবে পৃথক কিফ্ৰেম সৃষ্টি কৰাৰ পৰিবৰ্তে, kf-zoom কিফ্ৰেমৰ এটা নমনীয় গোট নিৰ্মাণ কৰোঁ আহক:
/* * জুম - স্কেল এনিমেচন * স্কেল মান নিয়ন্ত্ৰণ কৰিবলে --kf-zoom-from আৰু --kf-zoom-to ব্যৱহাৰ কৰক * অবিকল্পিত: 80% ৰ পৰা 100% (0.8 ৰ পৰা 1 লৈ) জুম * ব্যৱহাৰ: * এনিমেচন: kf-zoom 0.2s সহজ-আউট; * --kf-zoom-from: ০.৫; --kf-zoom-to: ১; // ৫০%ৰ পৰা ১০০%লৈ জুম কৰক * --kf-zoom-from: ১; --kf-zoom-to: ০; // ১০০%ৰ পৰা ০%লৈ জুম কৰক * --kf-zoom-from: ১; --kf-zoom-to: ১.১; // ১০০%ৰ পৰা ১১০% লৈ জুম কৰক */
@কীফ্ৰেম kf-zoom { { ৰ পৰা স্কেল: var(--kf-zoom-from, 0.8); } to { স্কেল: var(--kf-জুম-টু, ১); } }
এটা সংজ্ঞাৰ সহায়ত আমি প্ৰয়োজনীয় যিকোনো জুম ভিন্নতা লাভ কৰিব পাৰো: .টোষ্ট { এনিমেচন: kf-স্লাইড-ইন 0.2s, kf-zoom 0.4s সহজ-আউট; --kf-slide-from: ০ ১০০%; /* ওপৰৰ পৰা স্লাইড */ /* অবিকল্পিত জুম ব্যৱহাৰ কৰে: 80% ৰ পৰা 100% লৈ স্কেল কৰে */ }
.মডাল { এনিমেচন: kf-zoom 0.3s ঘন-বেজিয়াৰ(0.34, 1.56, 0.64, 1); --kf-zoom-from: ০; /* 0% ৰ পৰা 100% লৈ নাটকীয় জুম */ }
.শিৰোনাম { এনিমেচন: kf-ফেড-ইন ২s, kf-zoom 2s সহজ-ইন; --kf-zoom-from: ১.২; --kf-zoom-to: ০.৮; /* কোমল স্কেল ডাউন */ }
0.8 (80%) ৰ অবিকল্পিতভাৱে বেছিভাগ UI উপাদানৰ বাবে নিখুঁতভাৱে কাম কৰে, যেনে টোষ্ট বাৰ্তা আৰু কাৰ্ড, আনহাতে বিশেষ ক্ষেত্ৰসমূহৰ বাবে স্বনিৰ্বাচিত কৰাটো সহজ। কলম Keyframes টোকেন দেখুন - ডেমো 4 [forked] অমিত শ্বীন দ্বারা. আপুনি হয়তো শেহতীয়া উদাহৰণবোৰত কিবা এটা আকৰ্ষণীয় কথা লক্ষ্য কৰিছে: আমি এনিমেচনসমূহ একত্ৰিত কৰি আহিছো। @keyframes টোকেনসমূহৰ সৈতে কাম কৰাৰ এটা মূল সুবিধা হ’ল যে ইয়াক ইটোৱে সিটোৰ সৈতে নিৰৱচ্ছিন্নভাৱে সংহতি কৰিবলে ডিজাইন কৰা হৈছে৷ এই মসৃণ ৰচনাখন ইচ্ছাকৃত, আকস্মিক নহয়। আমি পিছত এনিমেচন ৰচনাৰ বিষয়ে অধিক বিশদভাৱে আলোচনা কৰিম, য’ত ইহঁত সমস্যাজনক হ’ব পাৰে তাক অন্তৰ্ভুক্ত কৰি, কিন্তু বেছিভাগ সংমিশ্ৰণ পোনপটীয়া আৰু প্ৰণয়ন কৰাত সহজ৷ বি:দ্ৰ: এই লেখাটো লিখি থাকোঁতে, আৰু হয়তো লিখাৰ বাবেই, মই নিজকে প্ৰৱেশ এনিমেচনৰ গোটেই ধাৰণাটো পুনৰ চিন্তা কৰা দেখিলোঁ। শেহতীয়াকৈ চি এছ এছৰ সকলো অগ্ৰগতিৰ পিছতো আমাক এতিয়াও সেইবোৰৰ আচলতে প্ৰয়োজন আছেনে? ভাগ্য ভাল যে এডাম আৰ্গাইলে একেবোৰ প্ৰশ্নকে অন্বেষণ কৰি নিজৰ ব্লগত উজ্জ্বলভাৱে প্ৰকাশ কৰিলে। ইয়াত লিখাৰ বিৰোধিতা নহয়, কিন্তু ই বিবেচনাৰ যোগ্য এটা পদ্ধতি উপস্থাপন কৰে, বিশেষকৈ যদি আপোনাৰ প্ৰকল্পসমূহ প্ৰৱেশ এনিমেচনৰ ওপৰত বহু পৰিমাণে নিৰ্ভৰ কৰে। অবিৰত এনিমেচন প্ৰৱেশ এনিমেচন, যেনে “ফেড”, “স্লাইড”, আৰু “জুম” এবাৰ ঘটে আৰু তাৰ পিছত বন্ধ হৈ যায়, অবিৰত এনিমেচনসমূহে দৃষ্টি আকৰ্ষণ কৰিবলৈ বা চলি থকা কাৰ্য্যকলাপক সূচাবলৈ অনিৰ্দিষ্টকাললৈ লুপ কৰে। মই সন্মুখীন হোৱা দুটা সাধাৰণ অবিৰত এনিমেচন হ’ল “স্পিন” (লোডিং সূচকৰ বাবে) আৰু “পালছ” (গুৰুত্বপূৰ্ণ উপাদানসমূহ হাইলাইট কৰাৰ বাবে)। এই এনিমেচনসমূহে কিফ্ৰেম টোকেন সৃষ্টি কৰাৰ ক্ষেত্ৰত অনন্য প্ৰত্যাহ্বানৰ সৃষ্টি কৰে। সাধাৰণতে এটা অৱস্থাৰ পৰা আন এটা অৱস্থালৈ যোৱা প্ৰৱেশ এনিমেচনৰ দৰে নহয়, অবিৰত এনিমেচনসমূহ সিহঁতৰ আচৰণৰ আৰ্হিত অতি স্বনিৰ্বাচিত হোৱাটো প্ৰয়োজন। স্পিন ডাক্তৰ প্ৰতিটো প্ৰজেক্টতে একাধিক স্পিন এনিমেচন ব্যৱহাৰ কৰা যেন লাগে। কিছুমান ঘড়ীৰ কাঁটাৰ দিশত ঘূৰি থাকে, আন কিছুমান ঘড়ীৰ কাঁটাৰ বিপৰীত দিশত। কোনোৱে ৩৬০ ডিগ্ৰী একক ঘূৰণীয়া কৰে, আন কোনোৱে দ্ৰুত প্ৰভাৱৰ বাবে একাধিক ঘূৰণীয়া কৰে। প্ৰতিটো ভিন্নতাৰ বাবে পৃথক কিফ্ৰেম সৃষ্টি কৰাৰ পৰিবৰ্তে, এটা নমনীয় স্পিন নিৰ্মাণ কৰোঁ যিয়ে সকলো পৰিস্থিতি নিয়ন্ত্ৰণ কৰে:
/* * স্পিন - ঘূৰ্ণন এনিমেচন * ঘূৰ্ণন পৰিসৰ নিয়ন্ত্ৰণ কৰিবলে --kf-spin-from আৰু --kf-spin-to ব্যৱহাৰ কৰক * ঘূৰ্ণনৰ পৰিমাণ নিয়ন্ত্ৰণ কৰিবলৈ --kf-spin-turns ব্যৱহাৰ কৰক * অবিকল্পিত: 0deg ৰ পৰা 360deg লৈ ঘূৰে (1 সম্পূৰ্ণ ঘূৰ্ণন) * ব্যৱহাৰ: * এনিমেচন: kf-spin 1s ৰৈখিক অসীম; * --kf-স্পিন-টাৰ্ণ: ২; // ২ টা সম্পূৰ্ণ ঘূৰণ * --kf-স্পিন-ৰ পৰা: 0deg; --kf-স্পিন-টু: ১৮০ডিগ্ৰী; // আধা ঘূৰ্ণন * --kf-স্পিন-ৰ পৰা: 0deg; --kf-স্পিন-টু: -360deg; // ঘড়ীৰ কাঁটাৰ বিপৰীত দিশত */
@কীফ্ৰেম kf-স্পিন { { ৰ পৰা ঘূৰাওক: var(--kf-স্পিন-ৰ পৰা, 0deg); } to { ঘূৰাওক: calc(var(--kf-স্পিন-ৰ পৰা, 0deg) + var(--kf-স্পিন-টু, 360deg) * var(--kf-স্পিন-টাৰ্ণ, 1)); } }
এতিয়া আমি আমাৰ ভাল লগা যিকোনো স্পিন ভেৰিয়েচন সৃষ্টি কৰিব পাৰো:
.লোডিং-স্পিনাৰ { এনিমেচন: kf-spin 1s ৰৈখিক অসীম; /* অবিকল্পিত ব্যৱহাৰ কৰে: 0deg ৰ পৰা 360deg লৈ ঘূৰে */ }
.দ্রুত-লোডাৰ { এনিমেচন: kf-spin 1.2s সহজ-ইন-আউট অসীম বিকল্প; --kf-স্পিন-টাৰ্ণ: ৩; /* প্ৰতিটো চক্ৰত প্ৰতিটো দিশৰ বাবে ৩টা সম্পূৰ্ণ ঘূৰ্ণন*/ }
.পদক্ষেপ-বিপৰীত { এনিমেচন: kf-spin 1.5s পদক্ষেপ(8) অসীম; --kf-স্পিন-টু: -360deg; /* ঘড়ীৰ কাঁটাৰ বিপৰীত দিশত */ }
.সূক্ষ্ম-উইগল { এনিমেচন: kf-spin 2s সহজ-ইন-আউট অসীম বিকল্প; --kf-স্পিন-ৰ পৰা: -16deg; --kf-স্পিন-টু: ৩২ডিগ্ৰী; /* wiggle 36 deg: -18deg আৰু +18deg ৰ মাজত */ }
কলম Keyframes টোকেন দেখুন - ডেমো 5 [forked] অমিত শ্বীন দ্বারা. এই পদ্ধতিৰ সৌন্দৰ্য্য হ'ল যে একেবোৰ কিফ্ৰেমে স্পিনাৰ, ঘূৰ্ণনশীল আইকন, উইগল ইফেক্ট, আৰু আনকি জটিল মাল্টি-টাৰ্ণ এনিমেচন লোড কৰাৰ বাবে কাম কৰে। দ্য পালছ পেৰাডক্স পালছ এনিমেচনবোৰ অধিক কৌশলী কাৰণ ই বিভিন্ন বৈশিষ্ট্যক “পালছ” কৰিব পাৰে। কিছুমানে স্কেলক পালছ কৰে, আন কিছুমানে অস্পষ্টতাক পালছ কৰে, আৰু কিছুমানে উজ্জ্বলতা বা সংপৃক্ততাৰ দৰে ৰঙৰ ধৰ্ম পালছ কৰে। প্ৰতিটো বৈশিষ্ট্যৰ বাবে পৃথক কিফ্ৰেম সৃষ্টি কৰাৰ পৰিৱৰ্তে, আমি যিকোনো CSS বৈশিষ্ট্যৰ সৈতে কাম কৰা কিফ্ৰেম সৃষ্টি কৰিব পাৰো। ইয়াত স্কেল আৰু অস্পষ্টতা বিকল্পসমূহৰ সৈতে এটা পালছ কিফ্ৰেমৰ এটা উদাহৰণ দিয়া হৈছে:
/* * পালছ - পালছিং এনিমেচন * স্কেল পৰিসীমা নিয়ন্ত্ৰণ কৰিবলে --kf-pulse-scale-from আৰু --kf-pulse-scale-to ব্যৱহাৰ কৰক * অস্পষ্টতা পৰিসীমা নিয়ন্ত্ৰণ কৰিবলে --kf-pulse-opacity-from আৰু --kf-pulse-opacity-to ব্যৱহাৰ কৰক * অবিকল্পিত: কোনো পালছ নাই (সকলো মান 1) * ব্যৱহাৰ: * এনিমেচন: kf-pulse 2s সহজ-ইন-আউট অসীম বিকল্প; * --kf-পালছ-স্কেল-ৰ পৰা: 0.95; --kf-পালছ-স্কেল-টু: ১.০৫; // স্কেল পালছ * --kf-পালছ-অস্পষ্টতা-ৰ পৰা: 0.7; --kf-পালছ-অস্পষ্টতা-to: 1; // অস্পষ্টতা পালছ */
@কীফ্ৰেম kf-পালছ { { ৰ পৰা স্কেল: var(--kf-পালছ-স্কেল-ৰ পৰা, 1); অস্পষ্টতা: var(--kf-পালছ-অস্পষ্টতা-ৰ পৰা, 1); } to { স্কেল: var(--kf-পালছ-স্কেল-টু, ১); অস্পষ্টতা: var(--kf-পালছ-অস্পষ্টতা-to, 1); } }
ই এটা নমনীয় পালছ সৃষ্টি কৰে যি একাধিক বৈশিষ্ট্যক সজীৱ কৰিব পাৰে: .কল-টু-একচন { এনিমেচন: kf-পালছ 0.6s অসীম বিকল্প; --kf-পালছ-অস্পষ্টতা-ৰ পৰা: 0.5; /* অস্পষ্টতা পালছ */ }
.অধিসূচনা-বিন্দু { এনিমেচন: kf-pulse 0.6s সহজ-ইন-আউট অসীম বিকল্প; --kf-পালছ-স্কেল-ৰ পৰা: 0.9; --kf-পালছ-স্কেল-টু: ১.১; /* স্কেল পালছ */ }
.টেক্সট-হাইলাইট { এনিমেচন: kf-pulse 1.5s সহজ-আউট অসীম; --kf-পালছ-স্কেল-ৰ পৰা: 0.8; --kf-পালছ-অস্পষ্টতা-ৰ পৰা: 0.2; /* স্কেল আৰু অস্পষ্টতা পালছ */ }
কলম Keyframes টোকেন দেখুন - ডেমো 6 [forked] অমিত শ্বীন দ্বারা. এই একক kf-পালছ কিফ্ৰেমে সূক্ষ্ম মনোযোগ আকৰ্ষণৰ পৰা নাটকীয় হাইলাইটলৈকে সকলো নিয়ন্ত্ৰণ কৰিব পাৰে, এই সকলোবোৰ স্বনিৰ্বাচিত কৰাটো সহজ হোৱাৰ সময়ত। এডভান্স ইজিং কিফ্ৰেম টোকেন ব্যৱহাৰ কৰাৰ এটা ভাল কথা হ'ল আমাৰ এনিমেচন লাইব্ৰেৰী সম্প্ৰসাৰণ কৰাটো কিমান সহজ আৰু বেছিভাগ ডেভেলপাৰে শূন্যৰ পৰা লিখিবলৈ আমনি নকৰা ইফেক্টসমূহ প্ৰদান কৰাটো কিমান সহজ, যেনে ইলাষ্টিক বা বাউন্স। ইয়াত এটা সৰল “বাউন্স” কিফ্ৰেম টোকেনৰ উদাহৰণ দিয়া হৈছে যি জাম্প উচ্চতা নিয়ন্ত্ৰণ কৰিবলে এটা --kf-bounce-from স্বনিৰ্বাচিত বৈশিষ্ট্য ব্যৱহাৰ কৰে। /* * বাউন্স - বাউন্সিং প্ৰৱেশদ্বাৰ এনিমেচন * জাম্প উচ্চতা নিয়ন্ত্ৰণ কৰিবলৈ --kf-bounce-from ব্যৱহাৰ কৰক * অবিকল্পিত: 100vh (পৰ্দা বন্ধ) ৰ পৰা জঁপিয়াই * ব্যৱহাৰ: * এনিমেচন: kf-বাউন্স 3s সহজ-ইন; * --kf-বাউন্স-ৰ পৰা: ২০০px; // 200px উচ্চতাৰ পৰা জঁপিয়াই */
@কীফ্ৰেম kf-বাউন্স { ০% { অনুবাদ কৰক: 0 calc(var(--kf-বাউন্স-ৰ পৰা, 100vh) * -1); }
৩৪% { অনুবাদ কৰক: 0 calc(var(--kf-বাউন্স-ৰ পৰা, 100vh) * -0.4); }
৫৫% { অনুবাদ কৰক: 0 calc(var(--kf-বাউন্স-ৰ পৰা, 100vh) * -0.2); }
৭২% { অনুবাদ কৰক: 0 calc(var(--kf-বাউন্স-ৰ পৰা, 100vh) * -0.1); }
৮৫% { অনুবাদ কৰক: 0 calc(var(--kf-বাউন্স-ৰ পৰা, 100vh) * -0.05); }
৯৪% { অনুবাদ কৰক: 0 calc(var(--kf-বাউন্স-ৰ পৰা, 100vh) * -0.025); }
৯৯% { অনুবাদ কৰক: 0 calc(var(--kf-বাউন্স-ৰ পৰা, 100vh) * -0.0125); }
২২%, ৪৫%, ৬৪%, ৭৯%, ৯০%, ৯৭%, ১০০% { অনুবাদ কৰক: 0 0; এনিমেচন-টাইমিং-ফাংচন: সহজ-আউট; } }
“ইলাষ্টিক”ৰ দৰে এনিমেচনবোৰ কিফ্ৰেমৰ ভিতৰত গণনাৰ বাবে অলপ কৌশলী। আমি --kf-elastic-from-X আৰু --kf-elastic-from-Y পৃথকে সংজ্ঞায়িত কৰিব লাগিব (দুয়োটা বৈকল্পিক), আৰু একেলগে সিহঁতে আমাক পৰ্দাৰ যিকোনো বিন্দুৰ পৰা এটা ইলাষ্টিক প্ৰৱেশ সৃষ্টি কৰিবলৈ দিয়ে।
/* * ইলাষ্টিক ইন - ইলাষ্টিক প্ৰৱেশদ্বাৰ এনিমেচন * আৰম্ভণিৰ অৱস্থান নিয়ন্ত্ৰণ কৰিবলে --kf-elastic-from-X আৰু --kf-elastic-from-Y ব্যৱহাৰ কৰক * অবিকল্পিত: ওপৰৰ কেন্দ্ৰৰ পৰা প্ৰৱেশ কৰে (0, -100vh) * ব্যৱহাৰ: * এনিমেচন: kf-ইলাষ্টিক-ইন 2s সহজ-ইন-আউট দুয়োটা; * --kf-এক্সৰ পৰা ইলাষ্টিক: -50px; * --kf-ইলাষ্টিক-ৰ পৰা-Y: -200px; // (-50px, -200px) ৰ পৰা প্ৰৱেশ কৰক */
@keyframes kf-ইলাষ্টিক-ইন { ০% { অনুবাদ কৰক: calc(var(--kf-এক্সৰ পৰা-ইলাষ্টিক, -50vw) * 1) calc(var(--kf-Y-ৰ পৰা-ইলাষ্টিক, 0px) * 1); }
১৬% { অনুবাদ কৰক: calc(var(--kf-এক্সৰ পৰা ইলাষ্টিক, -50vw) * -0.3227) calc(var(--kf-Yৰ পৰা-ইলাষ্টিক, 0px) * -0.3227); }
২৮% { অনুবাদ কৰক: calc(var(--kf-ইলাষ্টিক-ৰ পৰা-X, -50vw) * 0.1312)calc(var(--kf-ইলাষ্টিক-ৰ পৰা-Y, 0px) * 0.1312); }
৪৪% { অনুবাদ কৰক: calc(var(--kf-এক্সৰ পৰা ইলাষ্টিক, -50vw) * -0.0463) calc(var(--kf-Yৰ পৰা-ইলাষ্টিক, 0px) * -0.0463); }
৫৯% { অনুবাদ কৰক: calc(var(--kf-এক্সৰ পৰা ইলাষ্টিক, -50vw) * 0.0164) calc(var(--kf-Yৰ পৰা-ইলাষ্টিক, 0px) * 0.0164); }
৭৩% { অনুবাদ কৰক: calc(var(--kf-এক্সৰ পৰা ইলাষ্টিক, -50vw) * -0.0058) calc(var(--kf-Yৰ পৰা-ইলাষ্টিক, 0px) * -0.0058); }
৮৮% { অনুবাদ কৰক: calc(var(--kf-এক্সৰ পৰা ইলাষ্টিক, -50vw) * 0.0020) calc(var(--kf-Yৰ পৰা-ইলাষ্টিক, 0px) * 0.0020); }
১০০% { অনুবাদ কৰক: 0 0; } }
এই পদ্ধতিয়ে আমাৰ প্ৰকল্পত উন্নত কিফ্ৰেমসমূহ পুনৰ ব্যৱহাৰ আৰু স্বনিৰ্বাচিত কৰাটো সহজ কৰে, কেৱল এটা স্বনিৰ্বাচিত বৈশিষ্ট্য সলনি কৰি।
.বাউন্স-এণ্ড-জুম { এনিমেচন: kf-bounce 3s সহজ-ইন, kf-zoom 3s ৰৈখিক; --kf-zoom-from: ০; }
.বাউন্স-এণ্ড-স্লাইড { এনিমেচন-ৰচনা: যোগ কৰক; /* দুয়োটা এনিমেচনে অনুবাদ ব্যৱহাৰ কৰে */ এনিমেচন: kf-bounce 3s সহজ-ইন, kf-slide-in 3s সহজ-আউট; --kf-স্লাইড-ৰ পৰা: -200px; }
.ইলাষ্টিক-ইন { এনিমেচন: kf-ইলাষ্টিক-ইন 2s সহজ-ইন-আউট দুয়োটা; }
কলম Keyframes টোকেন দেখুন - ডেমো 7 [forked] অমিত শ্বীন দ্বারা. এই পৰ্যন্ত আমি দেখিছো যে আমি কেনেকৈ কিফ্ৰেমসমূহক স্মাৰ্ট আৰু কাৰ্যক্ষমভাৱে একত্ৰিত কৰিব পাৰো৷ অৱশ্যেই, আপুনি আপোনাৰ প্ৰকল্পৰ প্ৰয়োজন অনুসৰি বস্তুবোৰ টুইক কৰিব বিচাৰিব পাৰে, কিন্তু আমি কেইবাটাও সাধাৰণ এনিমেচন আৰু দৈনন্দিন ব্যৱহাৰৰ ক্ষেত্ৰৰ উদাহৰণ আলোচনা কৰিছো৷ আৰু এই কিফ্ৰেম টোকেনসমূহ ঠাইত থকাৰ সৈতে, আমাৰ হাতত এতিয়া সমগ্ৰ প্ৰকল্পটোত সামঞ্জস্যপূৰ্ণ, ৰক্ষণাবেক্ষণযোগ্য এনিমেচন সৃষ্টি কৰাৰ বাবে শক্তিশালী বিল্ডিং ব্লক আছে। আৰু ডুপ্লিকেটেড কিফ্ৰেম নাই, আৰু গ্লোবেল স্কোপ সংঘাত নাই। মাত্ৰ আমাৰ সকলো এনিমেচনৰ প্ৰয়োজনীয়তা চম্ভালিবলৈ এটা পৰিষ্কাৰ, সুবিধাজনক উপায়। কিন্তু আচল প্ৰশ্নটো হ’ল: আমি এই বিল্ডিং ব্লকবোৰ একেলগে কেনেকৈ ৰচনা কৰিম? পুটিং ইট অল টুগেদাৰ আমি দেখিছো যে মৌলিক কিফ্ৰেম টোকেনসমূহ একত্ৰিত কৰাটো সহজ৷ প্ৰথম এনিমেচনটো সংজ্ঞায়িত কৰা, দ্বিতীয়টো সংজ্ঞায়িত কৰা, প্ৰয়োজন অনুসৰি ভেৰিয়েবলবোৰ ছেট কৰাৰ বাহিৰে আমাক বিশেষ একো নালাগে, আৰু সেয়াই হ’ল। /* ফেড ইন + স্লাইড ইন */ .টোষ্ট { এনিমেচন: kf-fede-in ০.৪ছেকেণ্ড, kf-স্লাইড-ইন ০.৪s ঘন-বেজিয়াৰ(০.৩৪, ১.৫৬, ০.৬৪, ১); --kf-স্লাইড-ৰ পৰা: 0 40px; }
/* জুম ইন + ফেড ইন */ .মডাল { এনিমেচন: kf-ফেড-ইন ০.৩ছেকেণ্ড, kf-zoom 0.3s ঘন-বেজিয়াৰ(0.34, 1.56, 0.64, 1); --kf-zoom-from: ০.৭; --kf-zoom-to: ১; }
/* স্লাইড ইন + পালছ */ .অধিসূচনা { এনিমেচন: kf-স্লাইড-ইন ০.৫ছেকেণ্ড, kf-pulse 1.2s সহজ-ইন-আউট অসীম বিকল্প; --kf-স্লাইড-ৰ পৰা: -100px 0; --kf-পালছ-স্কেল-ৰ পৰা: ০.৯৫; --kf-পালছ-স্কেল-টু: ১.০৫; }
এই সংমিশ্ৰণসমূহে সুন্দৰভাৱে কাম কৰে কাৰণ প্ৰতিটো এনিমেচনে এটা বেলেগ বৈশিষ্ট্যক লক্ষ্য কৰে: অস্পষ্টতা, ৰূপান্তৰ (অনুবাদ/স্কেল), ইত্যাদি। কিন্তু কেতিয়াবা সংঘাত হয়, আৰু আমি জানিব লাগিব যে কিয় আৰু কেনেকৈ ইয়াৰ সৈতে মোকাবিলা কৰিব লাগে। যেতিয়া দুটা এনিমেচনে একেটা বৈশিষ্ট্য এনিমেট কৰিবলৈ চেষ্টা কৰে — উদাহৰণস্বৰূপ, দুয়োটা স্কেল এনিমেট কৰে বা দুয়োটাই অস্পষ্টতাক এনিমেট কৰে — ফলাফল আপুনি আশা কৰা ধৰণে নহ'ব। অবিকল্পিতভাৱে, এনিমেচনসমূহৰ এটাহে প্ৰকৃততে সেই বৈশিষ্ট্যত প্ৰয়োগ কৰা হয়, যি এনিমেচন তালিকাৰ শেষ। এইটো এটা সীমাবদ্ধতা যে CSS এ একেটা বৈশিষ্ট্যত একাধিক এনিমেচন কেনেকৈ নিয়ন্ত্ৰণ কৰে। উদাহৰণস্বৰূপ, ই উদ্দেশ্য অনুসৰি কাম নকৰিব কাৰণ কেৱল kf-pulse এনিমেচন প্ৰযোজ্য হ'ব। .বেয়া-কম্বো { এনিমেচন: kf-zoom 0.5s আগলৈ, kf-পালছ ১.২s অসীম বিকল্প; --kf-zoom-from: ০.৫; --kf-zoom-to: ১.২; --kf-পালছ-স্কেল-ৰ পৰা: 0.8; --kf-পালছ-স্কেল-টু: ১.১; }
এনিমেচন সংযোজন একেটা বৈশিষ্ট্যক প্ৰভাৱিত কৰা একাধিক এনিমেচন নিয়ন্ত্ৰণ কৰাৰ আটাইতকৈ সহজ আৰু প্ৰত্যক্ষ উপায় হ'ল এনিমেচন-ৰচনা বৈশিষ্ট্য ব্যৱহাৰ কৰা। ওপৰৰ শেষৰ উদাহৰণটোত, kf-pulse এনিমেচনে kf-zoom এনিমেচনৰ ঠাই লয়, গতিকে আমি প্ৰাৰম্ভিক জুম দেখা নাপাম আৰু প্ৰত্যাশিত স্কেল 1.2 নাপাম। যোগ কৰিবলৈ এনিমেচন-কম্পোজিচন ছেট কৰি আমি ব্ৰাউজাৰক কওঁ যে দুয়োটা এনিমেচন একত্ৰিত কৰক। ইয়াৰ দ্বাৰা আমি বিচৰা ফলাফলটো পোৱা যায়। .উপাদান-দুটা { এনিমেচন-ৰচনা: যোগ কৰক; }
কলম Keyframes টোকেন দেখুন - ডেমো 8 [forked] অমিত শ্বীন দ্বারা. এই পদ্ধতিয়ে বেছিভাগ ক্ষেত্ৰতে ভাল কাম কৰে য'ত আমি একেটা বৈশিষ্ট্যৰ ওপৰত প্ৰভাৱ একত্ৰিত কৰিব বিচাৰো। যেতিয়া আমি ষ্টেটিক প্ৰপাৰ্টি ভেলুৰ সৈতে এনিমেচন সংযুক্ত কৰিব লাগে তেতিয়াও ই উপযোগী। উদাহৰণস্বৰূপে, যদি আমাৰ এটা উপাদান আছে যিয়ে ইয়াক আমি বিচৰা ঠাইত স্থাপন কৰিবলৈ অনুবাদ বৈশিষ্ট্য ব্যৱহাৰ কৰে, আৰু তাৰ পিছত আমি ইয়াক kf-slide-in কিফ্ৰেমৰ সৈতে এনিমেট কৰিব বিচাৰো, আমি এনিমেচন-ৰচনা অবিহনে এটা জঘন্য দৃশ্যমান জাম্প পাম। কলম Keyframes টোকেন দেখুন - ডেমো 9 [forked] অমিত শ্বীন দ্বারা. এনিমেচন-ৰচনা যোগ কৰিবলৈ ছেট কৰাৰ সৈতে, এনিমেচনক বৰ্তমানৰ সৈতে মসৃণভাৱে সংযুক্ত কৰা হয়ৰূপান্তৰিত হয়, যাতে মৌলটো ঠাইত থাকে আৰু আশা কৰা ধৰণে সজীৱ হয়। এনিমেচন ষ্টেগাৰ একাধিক এনিমেচন নিয়ন্ত্ৰণ কৰাৰ আন এটা উপায় হ'ল সিহতক “ষ্টেগাৰ” কৰা — অৰ্থাৎ, প্ৰথমটো শেষ হোৱাৰ অলপ পিছত দ্বিতীয় এনিমেচন আৰম্ভ কৰক। ই প্ৰতিটো ক্ষেত্ৰতে কাম কৰা সমাধান নহয়, কিন্তু ই উপযোগী যেতিয়া আমাৰ হাতত এটা প্ৰৱেশ এনিমেচন থাকে আৰু তাৰ পিছত এটা অবিৰত এনিমেচন থাকে। /* + অস্পষ্টতা পালছত ফিক কৰা */ .অধিসূচনা { এনিমেচন: kf-fade-in 2s সহজ-আউট, kf-পালছ 0.5s 2s সহজ-ইন-আউট অসীম বিকল্প; --kf-পালছ-অস্পষ্টতা-to: 0.5; }
কলম Keyframes টোকেন দেখুন - ডেমো 10 [forked] অমিত শ্বীন দ্বারা. অৰ্ডাৰ মেটাৰছ আমি কাম কৰা এনিমেচনসমূহৰ এটা বৃহৎ অংশই transform প্ৰপাৰ্টি ব্যৱহাৰ কৰে। বেছিভাগ ক্ষেত্ৰতে এইটো কেৱল অধিক সুবিধাজনক। ইয়াৰ এটা পৰিৱেশন সুবিধাও আছে কাৰণ ট্ৰেন্সফৰ্ম এনিমেচনসমূহ GPU-ত্বৰিত কৰিব পাৰি। কিন্তু যদি আমি ৰূপান্তৰ ব্যৱহাৰ কৰো তেন্তে আমি মানি ল’ব লাগিব যে আমি আমাৰ ৰূপান্তৰসমূহ যি ক্ৰমত সম্পন্ন কৰোঁ, সেইটোৱেই গুৰুত্বপূৰ্ণ। অনেক। আমাৰ এতিয়ালৈকে কিফ্ৰেমসমূহত, আমি ব্যক্তিগত ৰূপান্তৰ ব্যৱহাৰ কৰিছো৷ স্পেক অনুসৰি, এইবোৰ সদায় এটা নিৰ্দিষ্ট ক্ৰমত প্ৰয়োগ কৰা হয়: প্ৰথমে, উপাদানটোৱে অনুবাদ পায়, তাৰ পিছত ঘূৰায়, তাৰ পিছত স্কেল কৰে। এইটো যুক্তিসংগত আৰু আমাৰ বেছিভাগেই আশা কৰা ধৰণৰ। কিন্তু যদি আমি transform প্ৰপাৰ্টি ব্যৱহাৰ কৰো তেন্তে ফাংচনবোৰ যি ক্ৰমত লিখা হৈছে সেই ক্ৰমত প্ৰয়োগ কৰা হৈছে। এই ক্ষেত্ৰত আমি যদি কিবা এটা এক্স-অক্ষত ১০০ পিক্সেল লৰচৰ কৰোঁ আৰু তাৰ পিছত ৪৫ ডিগ্ৰী ঘূৰাওঁ তেন্তে প্ৰথমে ৪৫ ডিগ্ৰী ঘূৰাই তাৰ পিছত ১০০ পিক্সেল লৰচৰ কৰাৰ সৈতে একে নহয়। /* গোলাপী বৰ্গ: প্ৰথমে অনুবাদ কৰক, তাৰ পিছত ঘূৰাওক */ .উদাহৰণ-এক { ৰূপান্তৰ: translateX(100px) ঘূৰাওক(45deg); }
/* সেউজীয়া বৰ্গ: প্ৰথমে ঘূৰাওক, তাৰ পিছত অনুবাদ কৰক */ .উদাহৰণ-দুটা { ৰূপান্তৰ: ঘূৰাওক(45deg) translateX(100px); }
কলম Keyframes টোকেন দেখুন - ডেমো 11 [forked] অমিত শ্বীন দ্বারা. কিন্তু ৰূপান্তৰ ক্ৰম অনুসৰি, সকলো ব্যক্তিগত ৰূপান্তৰ — আমি কিফ্ৰেম টোকেনৰ বাবে ব্যৱহাৰ কৰা সকলো — ৰূপান্তৰ কাৰ্য্যৰ আগতেই ঘটে। অৰ্থাৎ আপুনি ট্ৰেন্সফৰ্ম প্ৰপাৰ্টিত ছেট কৰা যিকোনো বস্তু এনিমেচনৰ পিছত হ'ব। কিন্তু যদি আপুনি, উদাহৰণস্বৰূপে, kf-spin কিফ্ৰেমসমূহৰ সৈতে একেলগে অনুবাদ নিৰ্ধাৰণ কৰে, অনুবাদ এনিমেচনৰ আগতে হ'ব। এতিয়াও বিভ্ৰান্ত?! ইয়াৰ ফলত এনে পৰিস্থিতিৰ সৃষ্টি হয় য'ত স্থিতিশীল মানসমূহে একেটা এনিমেচনৰ বাবে বিভিন্ন ফলাফলৰ সৃষ্টি কৰিব পাৰে, যেনে নিম্নলিখিত ক্ষেত্ৰত:
/* দুয়োজন স্পিনাৰৰ বাবে সাধাৰণ এনিমেচন */ .স্পিনাৰ { এনিমেচন: kf-spin 1s ৰৈখিক অসীম; }
/* গোলাপী স্পিনাৰ: ঘূৰোৱাৰ আগতে অনুবাদ কৰক (ব্যক্তিগত ৰূপান্তৰ) */ .স্পিনাৰ-গোলাপী { অনুবাদ কৰক: ১০০% ৫০%; }
/* সেউজীয়া স্পিনাৰ: ঘূৰাওক তাৰ পিছত অনুবাদ কৰক (কাৰ্য্য ক্ৰম) */ .স্পিনাৰ-সেউজীয়া { ৰূপান্তৰ: অনুবাদ(১০০%, ৫০%); }
কলম Keyframes টোকেন দেখুন - Demo 12 [forked] অমিত শ্বীন দ্বারা. আপুনি দেখিব পাৰে যে প্ৰথম স্পিনাৰে (গোলাপী) এটা অনুবাদ পায় যিটো kf-spin ৰ ঘূৰ্ণনৰ আগতে ঘটে, গতিকে ই প্ৰথমে নিজৰ ঠাইলৈ যায় আৰু তাৰ পিছত স্পিন কৰে। দ্বিতীয় স্পিনাৰে (সেউজীয়া) এটা translate() ফাংচন পায় যিটো ব্যক্তিগত ৰূপান্তৰৰ পিছত ঘটে, গতিকে মৌলটোৱে প্ৰথমে স্পিন কৰে, তাৰ পিছত ইয়াৰ বৰ্তমানৰ কোণৰ সাপেক্ষে গতি কৰে, আৰু আমি সেই বহল কক্ষপথৰ প্ৰভাৱ পাওঁ। নাই, এইটো কোনো বাগ নহয়। ই কেৱল সেইবোৰৰ ভিতৰত এটা মাত্ৰ যিটো আমি CSS ৰ বিষয়ে জানিব লাগিব আৰু একাধিক এনিমেচন বা একাধিক ৰূপান্তৰৰ সৈতে কাম কৰাৰ সময়ত মনত ৰাখিব লাগিব। যদি প্ৰয়োজন হয়, আপুনি kf-spin-alt কিফ্ৰেমসমূহৰ এটা অতিৰিক্ত গোট সৃষ্টি কৰিব পাৰে যি rotate() ফলন ব্যৱহাৰ কৰি উপাদানসমূহ ঘূৰায়। গতি হ্ৰাস কৰা আৰু আমি বিকল্প কিফ্ৰেমৰ কথা কওঁতে, আমি “নো এনিমেচন” বিকল্পটোক আওকাণ কৰিব নোৱাৰো। কিফ্ৰেম টোকেন ব্যৱহাৰ কৰাৰ এটা ডাঙৰ সুবিধা হ'ল অভিগম্যতাক বেক কৰিব পাৰি, আৰু ইয়াক আচলতে কৰাটো যথেষ্ট সহজ। আমাৰ কিফ্ৰেমসমূহ অভিগম্যতাক মনত ৰাখি ডিজাইন কৰি, আমি নিশ্চিত কৰিব পাৰো যে হ্ৰাস কৰা গতি পছন্দ কৰা ব্যৱহাৰকাৰীসকলে অতিৰিক্ত কাম বা ক'ড ডুপ্লিকেচন নোহোৱাকৈ, এটা মসৃণ, কম বিক্ষিপ্ত অভিজ্ঞতা লাভ কৰে। “Reduced Motion” ৰ সঠিক অৰ্থ এটা এনিমেচনৰ পৰা আন এটা এনিমেচনলৈ, আৰু প্ৰজেক্টৰ পৰা প্ৰজেক্টলৈ অলপ সলনি হ’ব পাৰে, কিন্তু ইয়াত মনত ৰাখিবলগীয়া কেইটামান গুৰুত্বপূৰ্ণ কথা উল্লেখ কৰা হ’ল: কীফ্ৰেমসমূহ নিস্তব্ধ কৰা কিছুমান এনিমেচন কোমল বা লেহেমীয়া কৰিব পাৰি যদিও আন কিছুমান আছে যিবোৰ গতি হ্ৰাস কৰাৰ অনুৰোধ কৰিলে সম্পূৰ্ণৰূপে নাইকিয়া হ'ব লাগে। পালছ এনিমেচন ইয়াৰ এটা ভাল উদাহৰণ। এই এনিমেচনসমূহ হ্ৰাস কৰা গতি অৱস্থাত চলিব নোৱাৰাটো নিশ্চিত কৰিবলৈ, আমি ইয়াক উপযুক্ত মিডিয়া প্ৰশ্নত ৰেপ কৰিব পাৰো।
@media (পছন্দ-হ্ৰাস-গতি: কোনো-পছন্দ) { @keyfrmaes kf-পালচ { { ৰ পৰা স্কেল: var(--kf-পালছ-স্কেল-ৰ পৰা, 1); অস্পষ্টতা: var(--kf-পালছ-অস্পষ্টতা-ৰ পৰা, 1); } to { স্কেল: var(--kf-পালছ-স্কেল-টু, ১); অস্পষ্টতা:var(--kf-পালছ-অস্পষ্টতা-to, 1); } } }
ই নিশ্চিত কৰে যে যিসকল ব্যৱহাৰকাৰীয়ে হ্ৰাস কৰিবলৈ পছন্দ-হ্ৰাস-গতি নিৰ্ধাৰণ কৰিছে তেওঁলোকে এনিমেচন দেখা নাপাব আৰু তেওঁলোকৰ পছন্দৰ সৈতে মিল থকা এটা অভিজ্ঞতা পাব। তৎক্ষণাত ইন কিছুমান কিফ্ৰেম আছে যিবোৰ আমি কেৱল আঁতৰাব নোৱাৰো, যেনে প্ৰৱেশ এনিমেচন। মূল্য সলনি হ’ব লাগিব, সজীৱ হ’ব লাগিব; অন্যথা, উপাদানটোৰ সঠিক মান নাথাকিব। কিন্তু হ্ৰাস কৰা গতিত প্ৰাৰম্ভিক মানৰ পৰা এই পৰিৱৰ্তন তৎক্ষণাত হ’ব লাগে। ইয়াক লাভ কৰিবলৈ আমি কিফ্ৰেমৰ এটা অতিৰিক্ত গোট সংজ্ঞায়িত কৰিম য’ত মানটো তৎক্ষণাত শেষ অৱস্থালৈ জপিয়াই পৰে। এইবোৰ আমাৰ ডিফল্ট কিফ্ৰেম হৈ পৰে। তাৰ পিছত, আমি পছন্দ-হ্ৰাস কৰা-গতিৰ বাবে এটা মিডিয়া প্ৰশ্নৰ ভিতৰত নিয়মীয়া কিফ্ৰেমসমূহ যোগ কৰিম, যিটো পূৰ্বৰ উদাহৰণৰ দৰেই। /* গতি হ্ৰাস কৰাৰ বাবে তৎক্ষণাত পপ ইন কৰক */ @কীফ্ৰেম kf-zoom { পৰা, { স্কেল: var(--kf-জুম-টু, ১); } }
@media (পছন্দ-হ্ৰাস-গতি: কোনো-পছন্দ) { /* মূল জুম কিফ্ৰেম */ @কীফ্ৰেম kf-zoom { { ৰ পৰা স্কেল: var(--kf-zoom-from, 0.8); } to { স্কেল: var(--kf-জুম-টু, ১); } } }
এইদৰে, যিসকল ব্যৱহাৰকাৰীয়ে হ্ৰাস কৰা গতি পছন্দ কৰে তেওঁলোকে উপাদানটো তৎক্ষণাত ইয়াৰ চূড়ান্ত অৱস্থাত দেখা পাব, আনহাতে বাকী সকলোৱে এনিমেটেড পৰিৱৰ্তন পাব। কোমল পদ্ধতি কিছুমান ক্ষেত্ৰত আমি কিছু গতি ৰাখিব বিচাৰো, কিন্তু মূল এনিমেচনতকৈ বহুত কোমল আৰু শান্ত। উদাহৰণস্বৰূপে, আমি বাউন্স প্ৰৱেশদ্বাৰৰ ঠাইত কোমল ফেড-ইন ব্যৱহাৰ কৰিব পাৰো।
@কীফ্ৰেম kf-বাউন্স { /* হ্ৰাস কৰা গতিৰ বাবে কোমল ফেড-ইন */ }
@media (পছন্দ-হ্ৰাস-গতি: কোনো-পছন্দ) { @কীফ্ৰেম kf-বাউন্স { /* মূল বাউন্স কিফ্ৰেম */ } }
এতিয়া, গতি হ্ৰাস কৰা ব্যৱহাৰকাৰীসকলে এতিয়াও ৰূপৰ অনুভৱ পায়, কিন্তু বাউন্স বা ইলাষ্টিক এনিমেচনৰ তীব্ৰ গতি অবিহনে। বিল্ডিং ব্লকসমূহ ঠাইত থকাৰ লগে লগে পৰৱৰ্তী প্ৰশ্নটো হ’ল ইয়াক প্ৰকৃত কৰ্মপ্ৰবাহৰ অংশ কেনেকৈ কৰিব পাৰি। নমনীয় কিফ্ৰেম লিখাটো এটা কথা, কিন্তু এটা বৃহৎ প্ৰকল্পত ইয়াক নিৰ্ভৰযোগ্য কৰি তুলিবলৈ কেইটামান কৌশলৰ প্ৰয়োজন হয় যিবোৰ মই কঠিনভাৱে শিকিবলগীয়া হৈছিল। ৰূপায়ণৰ কৌশল আৰু উত্তম পদ্ধতি এবাৰ আমাৰ হাতত কিফ্ৰেম টোকেনৰ এটা কঠিন লাইব্ৰেৰী হ’লে, প্ৰকৃত প্ৰত্যাহ্বানটো হ’ল ইয়াক কেনেকৈ দৈনন্দিন কামত আনিব পাৰি।
প্ৰলোভনটো হ'ল সকলো কিফ্ৰেম একেলগে ড্ৰপ কৰি সমস্যাটো সমাধান হোৱা বুলি ঘোষণা কৰা, কিন্তু কাৰ্যক্ষেত্ৰত মই দেখিছোঁ যে ক্ৰমান্বয়ে গ্ৰহণ কৰিলেই সৰ্বোত্তম ফলাফল পোৱা যায়। আটাইতকৈ সাধাৰণ এনিমেচনসমূহৰ পৰা আৰম্ভ কৰক, যেনে ফেড বা স্লাইড। এইবোৰ সহজ জয় যিয়ে ডাঙৰ পুনৰ লিখাৰ প্ৰয়োজন নোহোৱাকৈ তাৎক্ষণিক মূল্য দেখুৱায়। নামকৰণ আন এটা কথা যিটো মনোযোগৰ যোগ্য। এটা সামঞ্জস্যপূৰ্ণ উপসৰ্গ বা নামস্থানে কোনবোৰ এনিমেচন টোকেন আৰু কোনবোৰ স্থানীয় ৱান-অফ সেয়া স্পষ্ট কৰে। ইয়াৰ উপৰিও ই আকস্মিক সংঘৰ্ষ ৰোধ কৰে আৰু নতুন দলৰ সদস্যসকলক শ্বেয়াৰ কৰা ব্যৱস্থাটোক একেবাৰে চকুত পৰাত চিনি পোৱাত সহায় কৰে। নথিপত্ৰও ক'ডৰ দৰেই গুৰুত্বপূৰ্ণ। আনকি প্ৰতিটো কিফ্ৰেম টোকেনৰ ওপৰত এটা চুটি মন্তব্যইও পিছত ঘণ্টাৰ পিছত ঘণ্টা অনুমান কৰাৰ পৰা ৰক্ষা কৰিব পাৰে। এটা ডেভেলপাৰে টোকেন নথিপত্ৰ খোলিব পাৰিব লাগে, তেওঁলোকৰ প্ৰয়োজনীয় প্ৰভাৱৰ বাবে স্কেন কৰিব পাৰিব লাগে, আৰু ব্যৱহাৰৰ আৰ্হিক পোনপটীয়াকৈ তেওঁলোকৰ উপাদানলৈ কপি কৰিব পাৰিব লাগে। নমনীয়তাই এই পদ্ধতিটোক প্ৰচেষ্টাৰ যোগ্য কৰি তোলে। যুক্তিসংগত স্বনিৰ্বাচিত বৈশিষ্ট্যসমূহ উন্মোচন কৰি, আমি দলসমূহক চিস্টেমটো ভংগ নকৰাকৈ এনিমেচনক খাপ খুৱাবলৈ ঠাই দিওঁ। একে সময়তে অতি জটিল নহ’বলৈ চেষ্টা কৰক। গুৰুত্বপূৰ্ণ নববোৰ দিয়ক আৰু বাকীবোৰক মতামত দি ৰাখক। শেষত অভিগম্যতাক মনত ৰাখিব। প্ৰতিটো এনিমেচনতে হ্ৰাস কৰা গতিৰ বিকল্পৰ প্ৰয়োজন নহয়, কিন্তু বহুতে কৰে। এই সালসলনিবোৰ আগতীয়াকৈ বেক কৰাৰ অৰ্থ হ’ল আমি পিছত কেতিয়াও ইয়াক ৰেট্ৰ’ফিট কৰিব নালাগে, আৰু ই এনে এক স্তৰৰ যত্ন দেখুৱায় যিটো আমাৰ ব্যৱহাৰকাৰীসকলে কেতিয়াও উল্লেখ নকৰিলেও লক্ষ্য কৰিব।
মোৰ অভিজ্ঞতা অনুসৰি, কিফ্ৰেম টোকেনসমূহক আমাৰ ডিজাইন টোকেন ৱৰ্কফ্ল'ৰ অংশ হিচাপে গণ্য কৰাটোৱেই ইয়াক ষ্টিক কৰি তোলে। এবাৰ ঠাইত থাকিলেই ইহঁতে বিশেষ প্ৰভাৱৰ দৰে অনুভৱ কৰা বন্ধ কৰি ডিজাইন ভাষাৰ অংশ হৈ পৰে, যিটো প্ৰডাক্টটোৱে কেনেকৈ গতি কৰে আৰু কেনেকৈ প্ৰতিক্ৰিয়া প্ৰকাশ কৰে তাৰ এক স্বাভাৱিক সম্প্ৰসাৰণ। ৰেপিং আপ এনিমেচন আন্তঃপৃষ্ঠ নিৰ্মাণৰ অন্যতম আনন্দদায়ক অংশ হ’ব পাৰে, কিন্তু গঠন অবিহনে ই হতাশাৰ অন্যতম ডাঙৰ উৎসও হ’ব পাৰে। কিফ্ৰেমসমূহক টোকেন হিচাপে গণ্য কৰি, আপুনি সাধাৰণতে অগোছাল আৰু পৰিচালনা কৰাটো কঠিন কিবা এটা লয় আৰু ইয়াক এটা স্পষ্ট, ভৱিষ্যদ্বাণীযোগ্য ব্যৱস্থাপ্ৰণালীলৈ ৰূপান্তৰিত কৰে। প্ৰকৃত মূল্য কেৱল কেইশাৰীমান ক’ড সংৰক্ষণ কৰাত নহয়। এইটো এই আত্মবিশ্বাসত যে যেতিয়া আপুনি এটা ফেড, স্লাইড, জুম, বা স্পিন ব্যৱহাৰ কৰে, আপুনি সঠিকভাৱে জানে যে ই সমগ্ৰ প্ৰকল্পটোত কেনে আচৰণ কৰিব। অন্তহীন তাৰতম্যৰ বিশৃংখলতা অবিহনে কাষ্টম বৈশিষ্ট্যৰ পৰা অহা নমনীয়তাত। আৰু ই ভেটিত নিৰ্মিত অভিগম্যতাতহে যোগ কৰাতকৈএটা আফটাৰথ্থ। মই এই ধাৰণাবোৰে বিভিন্ন দল আৰু বিভিন্ন ক'ডবেছত কাম কৰা দেখিছো, আৰু আৰ্হিটো সদায় একেই। এবাৰ টোকেনসমূহ ঠাইত হ'লে, কিফ্ৰেমসমূহে কৌশলসমূহৰ এটা সিঁচৰতি সংগ্ৰহ হোৱা বন্ধ কৰে আৰু ডিজাইন ভাষাৰ অংশ হৈ পৰে। ইয়াৰ দ্বাৰা প্ৰডাক্টটোক অধিক ইচ্ছাকৃত, অধিক সামঞ্জস্যপূৰ্ণ আৰু অধিক সজীৱ অনুভৱ কৰা হয়। যদি আপুনি এই প্ৰবন্ধটোৰ পৰা এটা কথা লয়, তেন্তে সেয়া হওক: এনিমেচনসমূহে আমি ইতিমধ্যে ৰং, টাইপোগ্ৰাফী আৰু ব্যৱধানত দিয়া একে যত্ন আৰু গঠনৰ যোগ্য। কিফ্ৰেম টোকেনসমূহত এটা সৰু বিনিয়োগে প্ৰতিবাৰ আপোনাৰ আন্তঃপৃষ্ঠ স্থানান্তৰিত হোৱাৰ সময়ত ফল দিয়ে।
