ক্রমাগত ছবি ঘোরাতে কিভাবে CSS অ্যানিমেশন ব্যবহার করবেন

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

প্রথমত, আমাদের একটি চিত্র এবং কিছু বৈশিষ্ট্য সহ কিছু HTML মার্কআপ প্রয়োজন:

<img
  src="/article/uploadfiles/202203/2022033109325250.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

আপনার ইমেজ এই মত দেখানো উচিত:

আপনি দেখতে পাচ্ছেন যে আমাদের চিত্র উপাদানটির তিনটি ক্লাস রয়েছে, rotate , linear এবং infinite . আমাদের CSS স্টাইলশীটে আমাদের প্রতিটি ক্লাসের জন্য একটি ঘোষণা ব্লক তৈরি করতে হবে। এই ধরনের ক্লাসকে কখনও কখনও ইটিলিটি বলা হয় অথবা সহায়ক ক্লাস, কিন্তু আমি একক উদ্দেশ্য শব্দটি পছন্দ করি কারণ এটি আরও বর্ণনামূলক।

প্রথমে .rotate ঘোষণা করা যাক কোড ব্লক:

.rotate {
  animation: rotation 2s;
}

এখনও কিছুই ঘটবে না, কারণ আমাদের অ্যানিমেশন সম্পত্তির ঘূর্ণন ফাংশন সংজ্ঞায়িত করতে হবে। এই CSS কীফ্রেম নিয়মটি আপনার স্টাইলশীটে যোগ করুন:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

এখন আপনি যদি আপনার ব্রাউজার ট্যাবটি পুনরায় লোড করেন, তাহলে আপনি দেখতে পাবেন আপনার ছবি 2 সেকেন্ডের (2s) একক সময় ঘুরছে ) কিন্তু আমাদের আরও দুটি জিনিস করতে হবে। আমরা ইমেজটি ক্রমাগত ঘোরাতে চাই, এবং আমরা ডিফল্ট ease থেকে অ্যানিমেশন ট্রানজিশন টাইমিং পরিবর্তন করতে চাই একটি সামঞ্জস্যপূর্ণ গতি বক্ররেখা, যাকে বলা হয় linear .

এই .linear যোগ করুন আপনার CSS স্টাইলশীটে ঘোষণা ব্লক:

.linear {
  animation-timing-function: linear;
}

আপনার ব্রাউজার ট্যাব পুনরায় লোড করুন এবং আপনি দেখতে পাবেন যে আপনার ছবি এখন শুরু থেকে শেষ পর্যন্ত একটি সামঞ্জস্যপূর্ণ গতিতে ঘুরছে৷

সবশেষে, আমাদের .infinite ঘোষণা করে আমাদের ছবিকে অসীমভাবে ঘোরানো যাক ক্লাসের কোড ব্লক:

.infinite {
  animation-iteration-count: infinite;
}

এবং ভয়েলা, আপনার কাছে এখন একটি রৈখিক অ্যানিমেশন গতি বক্ররেখা সহ একটি অসীম/নিরবিচ্ছিন্নভাবে ঘোরানো চিত্র রয়েছে৷

CodePen

দ্রষ্টব্য:আমরা আমাদের সমস্ত অ্যানিমেশন বৈশিষ্ট্য একটি একক লাইন এবং একটি একক শ্রেণিতে ঘোষণা করতে পারতাম, যেমন:

.rotate-image {
  animation: rotation 2s linear infinite;
}

উপরেরটি অনেক কোড সেভ করে, কিন্তু শেখার/শিক্ষা দেওয়ার জন্য, আমি জিনিসগুলিকে ছোট ছোট কামড়ে ভেঙে দিতে পছন্দ করি, কারণ পৃথক উপাদানগুলি কীভাবে একসাথে কাজ করে তা বোঝা সহজ করে তোলে৷

ডিফল্ট ease এর পাশে অনেক অ্যানিমেশন কার্ভ রয়েছে এবং linear যে আমরা এখানে ব্যবহার করি। আপনি একটি cubic-bezier ব্যবহার করে সত্যিই অভিনব পেতে পারেন অ্যানিমেশন বক্ররেখা, কিন্তু আমি এটি একটি ভিন্ন টিউটোরিয়ালের জন্য সংরক্ষণ করব।