সিএসএস দিয়ে কীভাবে একটি সাধারণ লুপিং ব্যাকগ্রাউন্ড কালার অ্যানিমেশন তৈরি করবেন

কীফ্রেম এবং বিভিন্ন CSS অ্যানিমেশন বৈশিষ্ট্য ব্যবহার করে বিশুদ্ধ CSS সহ একটি সাধারণ অ্যানিমেটেড ব্যাকগ্রাউন্ড কালার লুপ তৈরি করতে শিখুন৷

এই উদাহরণে, আমরা HTML <body> কে টার্গেট করছি এলিমেন্ট সরাসরি CSS এর সাথে, কিন্তু আপনি যেকোন HTML এলিমেন্ট, ক্লাস বা আইডিতে নিম্নলিখিত কোড উদাহরণ প্রয়োগ করতে পারেন।

সিএসএস দিয়ে কীভাবে একটি সাধারণ লুপিং ব্যাকগ্রাউন্ড কালার অ্যানিমেশন তৈরি করবেন

The Code

আপনি একটি রেফারেন্স হিসাবে এই ডেমো ব্যবহার করতে পারেন.

দ্রষ্টব্য:এই কোডটি IE9 এ কাজ করবে না।

আপনার অ্যানিমেশনের পরিকল্পনা করা

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

আমরা কয়টি ব্যাকগ্রাউন্ড কালার ব্যবহার করতে চাই?
মোট অ্যানিমেশনের সময়কাল কতক্ষণ স্থায়ী হওয়া উচিত?
আমাদের কোন ধরনের অ্যানিমেশন ব্যবহার করা উচিত?

যেহেতু এই টিউটোরিয়ালটির উদ্দেশ্য জিনিসগুলিকে সহজ রাখা, আসুন ব্যবহার করি:

5টি ভিন্ন পটভূমির রং
10 সেকেন্ডের সময়কাল (প্রতিটি রঙ 2 সেকেন্ড প্রদর্শিত হয়)
একটি লিনিয়ার অ্যানিমেশন বক্ররেখা (অ্যানিমেশনের শুরু থেকে শেষ পর্যন্ত একই গতি থাকে)

এই উদাহরণের জন্য আমি দ্রুত একটি সুরেলা রঙের প্যালেট তৈরি করতে Coolers.co ব্যবহার করেছি:

এই হেক্স রঙগুলি আমাদের আসন্ন ব্যাকগ্রাউন্ড অ্যানিমেশনের মাধ্যমে লুপ হবে:

সূর্যাস্ত কমলা:#EE6055
মাঝারি অ্যাকোয়ামেরিন:#60D394
ফ্যাকাশে সবুজ:#AAF683
হলুদ হলুদ:#FFD97D
স্পর্শী ট্যানজারিন:#FF9B85

আপনাকে এই সমস্ত নামগুলি মুখস্থ করার দরকার নেই (এগুলি সরাসরি কুলার থেকে নেওয়া হয়েছে), আমি কেবল ভাল পরিমাপের জন্য সেগুলি যুক্ত করেছি৷

ঠিক আছে, তাই এখন আমাদের 5টি রঙ আছে, যেটি আমরা একটি লুপিং অ্যানিমেশনে ফেলতে যাচ্ছি যা প্রতিটি রঙ 2 সেকেন্ড প্রদর্শন করে৷

পরবর্তীতে আমরা আমাদের পরিকল্পনার উপর ভিত্তি করে অ্যানিমেশন তৈরি করব।

লুপিং CSS অ্যানিমেশন তৈরি করা

CSS-এ, অ্যানিমেশন কীফ্রেমগুলি 0% থেকে শতাংশে কাজ করে 100% . নিম্নলিখিত CSS কীফ্রেমগুলি যোগ করুন আপনার স্টাইলশীটে:

/* Standard syntax */
@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

এখন আমাদের কাছে backgroundColorPalette নামে একটি কীফ্রেম বৈশিষ্ট্য রয়েছে 5টি রঙের ব্যবধানের সাথে, যা সমানভাবে 0% থেকে বিভক্ত 100% অ্যানিমেশনের।

এখন সময় এসেছে বডি এলিমেন্টের CSS নিয়ম-সেট তৈরি করার, যাতে আমরা আমাদের কীফ্রেমের রঙ প্যালেট নিতে পারি এবং এটি ব্যবহার করতে পারি।

আপনার বডি সিলেক্টর রুল-সেটের ভিতরে নিম্নলিখিত CSS অ্যানিমেশন বৈশিষ্ট্যগুলি যোগ করুন এবং আপনার ব্রাউজার উইন্ডোতে কী ঘটছে তা দেখুন:

body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

আপনি যদি সবকিছু ঠিকঠাক করে থাকেন, তাহলে আপনার এখন অবিচ্ছিন্নভাবে চলমান ব্যাকগ্রাউন্ড কালার অ্যানিমেশন থাকা উচিত যা 2 সেকেন্ডের ব্যবধানে মসৃণভাবে রঙ থেকে রঙে রূপান্তরিত হয়।

কোড

আপনি একটি রেফারেন্স হিসাবে এই ডেমো ব্যবহার করতে পারেন.

সিএসএস কীভাবে কাজ করে

প্রথমে, আমরা animation-name যোগ করি সম্পত্তি এবং এটি backgroundColorPalette এর একটি মান দিন — এখন আমরা আগে তৈরি করা ব্যাকগ্রাউন্ড কালার কীফ্রেমগুলি বডি এলিমেন্টে অ্যাসাইন করা হয়েছে।
আমরা animation-duration: ব্যবহার করি সম্পত্তি এবং এটিকে 10 সেকেন্ডের একটি মান দিন — এখন আমাদের অ্যানিমেশনের মোট সময়কাল 10 সেকেন্ড। এছাড়াও আপনি মিলিসেকেন্ড 10000 ব্যবহার করতে পারেন .
আমরা animation-iteration-count ব্যবহার করি সম্পত্তি এবং এটি infinite এর একটি মান দিন . এটি ক্রমাগত অ্যানিমেশন লুপ করে তোলে। CSS-এ, ডিফল্ট হল 1 অ্যানিমেশন চক্র।
আমরা animation-direction ব্যবহার করি সম্পত্তি এবং এটি alternate এর একটি মান দিন . এটি অ্যানিমেশনকে শুরু থেকে শেষ পর্যন্ত এবং শেষ থেকে শুরুতে খেলা করে। আপনি normal ব্যবহার করলে আমরা একটি কুৎসিত লাফ এড়াতে এই সম্পত্তি মান ব্যবহার করি অ্যানিমেশন দিকনির্দেশের মান।

জেনে রাখা ভালো

ডিফল্টরূপে, CSS অ্যানিমেশন গতি বক্ররেখার ধরন রৈখিক সেট করা আছে . এর মানে হল যে আমরা যখন এটি ব্যবহার করতে চাই তখন আমাদের সিএসএস নিয়ম-সেটে সম্পত্তি ঘোষণা করতে হবে না। সেজন্য আমাদের আগের উদাহরণে অ্যানিমেশন গতি বক্ররেখা রৈখিকভাবে চলে।

যাইহোক, আপনি এখনও animation-timing-function: linear; যোগ করতে চাইতে পারেন আপনার কোডকে আরও অভিব্যক্তিপূর্ণ করতে আপনার CSS নিয়ম-সেট করুন — বিশেষ করে যদি আপনি একটি দলে কাজ করেন। এটি মনে রাখা কঠিন যে সমস্ত সম্পত্তি মান ডিফল্টরূপে CSS-এ সক্রিয় করা আছে।