সিএসএস দিয়ে অ্যানিমেশন বানানো খুব সহজ। এবং মজার ব্যাপার হলো এর জন্য আপনাকে কোনো থার্ড-পার্টি ফ্রেমওয়ার্ক বা প্লাগইন দরকার নেই।
@keyframes সিএসএস রুল হলো একটি টুল যা আমাদের বেল্টের নিচে থাকা দরকার এই অ্যানিমেশনগুলো বানাতে।
@keyframes সিন্ট্যাক্স
@keyframes একটি সিএসএস at-rule। At-rules বলে সিএসএস কীভাবে বিহ্যাব করবে। আরও অনেক at-rules রয়েছে যেমন @viewport, @supports ইত্যাদি।
আমরা একটি @keyframes রুল নিচের সিন্ট্যাক্স দিয়ে ডিফাইন করি:
@keyframes <name> { from { /* start details here */ } to { /* end details here */ } }
আমরা পারসেন্টেজ ব্যবহার করে আরও রিফাইন্ড অ্যানিমেশন ডিক্লেয়ারেশন করতে পারি কীওয়ার্ডের বদলে।
@keyframes <name> { 0% { } 50% { } 100% { } }
নোট: আমাদের নতুন তৈরি করা কীফ্রেম ব্যবহার করার জন্য আমাদের এটিকে animation-name প্রপার্টির মান হিসেবে যোগ করতে হবে। আমরা animation-duration সেট করেও পারি আমাদের ডিক্লেয়ার করা @keyframes অ্যানিমেশনটির ডিউরেশন নির্দিষ্ট করার জন্য।
ম্যাজিক বอล উদাহরণ (Magic Ball Example)
চলুন একটি ম্যাজিক বোল তৈরি করি যা দৃষ্টিগোচর হবে এবং আবার অদৃশ্য হবে। আপনি যদি কোনো পয়েন্টে भুলে যান তবে সাথে সাথের Codepen রেফার করুন।
প্রথমেই আমাদের অ্যানিমেশনটি ডিফাইন করতে হবে। আমরা এটিকে magic-ball নামে নামकरण করব:
@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 ব্যবহার করে সেকেন্ডে অ্যানিমেশন ডিউরেশন সেট করতে হবে।
এই অ্যানিমেশনের সাথে, আমাদের বোল এখন দৃষ্টিগোচর হচ্ছে এবং অদৃশ্য হচ্ছে!💥
ফ্ল্যাশ সেল উদাহরণ (Flash Sale Example)
চলুন আরেকটি অ্যানিমেশন তৈরি করি। এইবার আমরা একটি স্কোয়ার অ্যানিমেট করব এবং একটি মুভিং ইফেক্ট তৈরি করব। আমরা আমাদের অ্যানিমেশনকে moveIn নামে নামकरण করব এবং এই কেসে আমরা পারসেন্টেজ ব্যবহার করব।
@keyframes moveIn { 0% { opacity: 0; transform: translateY(3rem); } 100% { opacity: 1; transform: translate(0); } }
অপাসিটি (Opacity) প্রায়ই আমাদের ট্রান্সপারেন্সি। সুতরাং আমরা এই নতুন তৈরি করা অ্যানিমেশনটি আমাদের স্কোয়ারে প্রয়োগ করতে পারি।
.square { width: 10rem; height: 10rem; background-color: greenyellow; animation-name: moveIn; animation-duration: 4s; }
আপনি দেখতে পাচ্ছেন কীভাবে খুব কম কোড দিয়ে আমরা একটি চমৎকার ইফেক্ট অর্জন করেছি!
উপসংহার
আপনি সিএসএস ডকুমেন্টেশনের অ্যানিমেশন অংশ পড়ে আপনার অ্যানিমেশন যাত্রা চালিয়ে যেতে পারেন। এছাড়াও মনে রাখবেন, আমরা শুধু একটি উপায় রেফার করেছি আমাদের অ্যানিমেশন রিফাইন করার জন্য এর ডিউরেশন ব্যবহার করে। আরও অনেক অ্যানিমেশন সাব-প্রপার্টি রয়েছে যা দেখার لائق!
শেষে, মনে রাখবেন যে সব প্রপার্টি অ্যানিমেট করা যায় না। এই সমস্ত অ্যানিমেটেবল প্রপার্টির তালিকা দেখুন।
