CSS কীফ্রেম

সিএসএস দিয়ে অ্যানিমেশন তৈরি করা একটি হাওয়া। এবং মজার অংশ হল আপনার কোন তৃতীয় পক্ষের ফ্রেমওয়ার্ক বা প্লাগইন এর প্রয়োজন নেই।

@keyframes CSS নিয়ম হল এই অ্যানিমেশনগুলি তৈরি করার জন্য আমাদের বেল্টের নীচে একটি টুল।

@keyframes সিনট্যাক্স

@keyframes হল একটি CSS এট-রুল। এট-রুলস বলে যে কিভাবে CSS আচরণ করা উচিত। এখানে আরও অনেক নিয়ম রয়েছে যেমন @viewport, @supports অন্যদের মধ্যে।

আমরা নিম্নলিখিত সিনট্যাক্স সহ একটি @keyframes নিয়ম সংজ্ঞায়িত করি৷

@keyframes <name> {
    from {
    /* start details here */
    }

    to {
    /* end details here */
    }
}

আমরা কীওয়ার্ডের পরিবর্তে শতাংশ নির্দিষ্ট করে আরও পরিমার্জিত অ্যানিমেশন ঘোষণা পেতে পারি।

@keyframes <name> {
  0% { }
  50% { }
  100% { }
}

দ্রষ্টব্য :আমাদের নতুন তৈরি কীফ্রেম ব্যবহার করার জন্য আমাদের এটিকে animation-name -এর মান হিসাবে যুক্ত করতে হবে। সম্পত্তি আমরা animation-durationও সেট করতে পারি আমাদের ঘোষিত @keyframes অ্যানিমেশনের সময়কাল নির্দিষ্ট করতে।

ম্যাজিক বলের উদাহরণ

আসুন এগিয়ে যাই এবং একটি ম্যাজিক বল দেখাই এবং অদৃশ্য হয়ে যাই। আপনি যেকোন সময়ে হারিয়ে গেলে অনুগ্রহ করে সাথে থাকা কোডপেন দেখুন।

আমাদের প্রথম জিনিসটি আমাদের অ্যানিমেশন সংজ্ঞায়িত করতে হবে। আমরা এর নাম রাখব ম্যাজিক-বল:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

@keyframes magic-ball {
  from {
    background-color: limegreen;
  }
  to {
    background-color: blueviolet;
  }
}

এখানে মূলত আমরা পটভূমির রঙকে লাইমগ্রিন থেকে ব্লুভায়োলেটে পরিবর্তন করছি। এটি যেকোনো উপাদানে প্রয়োগ করা যেতে পারে, তবে আমরা এগিয়ে যাব এবং এটি একটি বৃত্তে প্রয়োগ করব৷

.circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  animation-name: magic-ball;
  animation-duration: 4s;
}

ভুলবেন না আমাদের কীফ্রেম অ্যানিমেশন কাজ করার জন্য আমাদের এটিকে animation-name এর মান হিসাবে যুক্ত করতে হবে সম্পত্তি এবং animation-duration ব্যবহার করে সেকেন্ডে একটি অ্যানিমেশন সময়কাল সেট করুন .

এই অ্যানিমেশনের সাহায্যে, এখন আমাদের বল দেখা যাচ্ছে এবং অদৃশ্য হয়ে যাচ্ছে!💥

ফ্ল্যাশ সেলের উদাহরণ

চলুন এগিয়ে যান এবং আরেকটি অ্যানিমেশন তৈরি করুন। এইবার আমরা একটি বর্গক্ষেত্রকে অ্যানিমেট করব এবং একটি চলমান প্রভাব তৈরি করব। আমরা আমাদের অ্যানিমেশন মুভইন নাম দেব এবং এই ক্ষেত্রে আমরা শতাংশ ব্যবহার করব।

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

অস্বচ্ছতা মোটামুটি আমাদের স্বচ্ছতা. তাই আমরা এই নতুন তৈরি অ্যানিমেশনটি আমাদের স্কোয়ারে প্রয়োগ করতে পারি

.square {
  width: 10rem;
  height: 10rem;
  background-color: greenyellow;
  animation-name: moveIn;
  animation-duration: 4s;
}

আপনি দেখতে পাচ্ছেন কিভাবে আমরা খুব কম সময়ে একটি সূক্ষ্ম প্রভাব অর্জন করেছি!

উপসংহার

আপনি অ্যানিমেশনে CSS ডকুমেন্টেশন পড়ে অ্যানিমেশনে আপনার যাত্রা চালিয়ে যেতে পারেন। এছাড়াও মনে রাখবেন, আমরা শুধুমাত্র আমাদের অ্যানিমেশনের সময়কাল ব্যবহার করে পরিমার্জিত করার একটি উপায় উল্লেখ করেছি। দেখার মতো আরও অনেক অ্যানিমেশন সাব-প্রপার্টি আছে!

অবশেষে, মনে রাখবেন যে সমস্ত বৈশিষ্ট্য অ্যানিমেটেড করা যায় না। অ্যানিমেটেড বৈশিষ্ট্যের এই সম্পূর্ণ তালিকাটি দেখুন।