এই কুইক টিউটোরিয়ালে আপনি শিখবেন কিভাবে CSS অ্যানিমেশন প্রপার্টি ব্যবহার করে ছবি লুপে ঘুরানো যায়।
HTML মার্কআপ তৈরি করুন
প্রথমে একটি ইমেজ এলিমেন্ট এবং কিছু ক্লাস যোগ করুন:
<img src="your-image.png" class="rotate linear infinite" width="150" height="150" />এখানে তিনটি ক্লাস ব্যবহার করা হয়েছে: rotate, linear এবং infinite। এগুলোকে সিঙ্গেল-পারপজ বা ইউটিলিটি ক্লাস বলা হয় কারণ প্রতিটির একক কাজ রয়েছে।
CSS এ রোটেশন অ্যানিমেশন ডিক্লেয়ার করুন
.rotate ক্লাসের জন্য অ্যানিমেশন সেট করুন:
.rotate { animation: rotation 2s; }এখন @keyframes নিয়ম যোগ করে রোটেশন ফাংশন ডিফাইন করুন:
@keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}ব্রাউজার রিফ্রেশ করলে ছবিটি ২ সেকেন্ডে একবার ঘুরবে। কিন্তু আমাদের দুটি কাজ আর বাকি: ক্রমাগত ঘুরানো এবং একই গতিতে (linear) ঘুরানো।
লিনিয়ার টাইমিং ফাংশন যোগ করুন
.linear { animation-timing-function: linear; }এখন ছবিটি শুরু থেকে শেষ পর্যন্ত একই গতিতে ঘুরবে।
অনন্ত লুপের জন্য infinite ক্লাস
.infinite { animation-iteration-count: infinite; }এখন আপনার ছবিটি নিরবচ্ছিন্ন ঘুরবে!
সংক্ষিপ্ত রূপ (Optional)
সব প্রপার্টি একসাথে লিখলেও হয়:
.rotate-image { animation: rotation 2s linear infinite; }এটি কোড কমাতে সাহায্য করে, তবে লার্নিং-এর জন্য আলাদা আলাদা ক্লাসে ভাঙা ভালো।
নোট: linear ছাড়া আরও অনেক টাইমিং ফাংশন আছে যেমন ease, ease-in, cubic-bezier ইত্যাদি। আপনি চাইলে পরের টিউটোরিয়ালে সেগুলো শিখতে পারেন।
