সিএসএস(৩) এনিমেশন
আপনি জাভাস্ক্রিপ্ট ব্যবহার করা ছাড়া অধিকাংশ এইচটিএমএল এলিমেন্টকে সিএসএস(৩) এনিমেশন দ্বারা প্রাণবন্ত করে তুলতে পারেন।
এনিমেশন
Animation
সিএসএস(৩) এনিমেশন প্রোপার্টি
নিচের টেবিলে @keyframes এবং সকল এনিমেশন প্রোপার্টি গুলো দেওয়া হলোঃ
এনিমেশন কি?
এনিমেশন দ্বারা একটি এলিমেন্টকে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করা যায়। আপনি আপনার ইচ্ছে মত প্রোপার্টিকে যতবার চাইবেন ততবার পরিবর্তন করতে পারবেন।
সিএসএস(৩) এনিমেশন ব্যবহার করতে হলে এনিমেশনের জন্য প্রথমে আপনাকে কিছু প্রোপার্টি নির্দিষ্ট করে দিতে হবে। আর এই প্রোপার্টি গুলো keyframes এর মধ্যে রাখতে হবে। যা পরবর্তিতে এনিমেশন ঘটার সময় আপনার এলিমেন্ট গুলোর স্টাইল পরিবর্তন করবে।
@keyframes এর নিয়ম
কোনো এলিমেন্টে এনিমেশন করতে হলে এর স্টাইল গুলো পরিবর্তন করতে হয়। আর এই পরিবর্তিত স্টাইল গুলো আমরা @keyframes এর ভিতর নির্দিষ্ট করে দিব। আর এই স্টাইল গুলোই এনিমেশনের সময় কাজ করবে।
@keyframes দ্বারা তৈরি এনিমেশনকে কাযে লাগাতে হলে আপনাকে অবশ্যই এটিকে animation প্রোপার্টি দ্বারা যে কোনো এলিমেন্টের সাথে বাইন্ড করতে হবে।
নিচের উদাহরণে দেখা যাবে এনিমেশনটিকে একটি <div> এলিমেন্টের সাথে বাইন্ড করা হয়েছে। এই এনিমেশনটি ৪ সেকেন্ডের যেখানে <div> এলিমেন্টির ব্যাকগ্রাউন্ড কালার লাল থেকে ধীরে ধীরে হলুদ কালারে পরিবর্তন হতে দেখা যাবেঃ
kt_satt_skill_example_id=1683
সর্তকতাঃ যদি animation-duration প্রোপার্টি ব্যবহার করা না হয় তবে এনিমেশনটির কোন প্রভাব থাকবেনা। কারণ এটির ডিফল্ট মান 0 থাকে।
উপরের উদাহরণে আমরা @keyframes এর মধ্যে "from" এবং "to" এই দুইটি কীওয়ার্ড দ্বারা এনিমেশনটি ডিফাইন করেছিলাম। এছাড়াও আমরা শতকরা(%) হারে এনিমেশনের মান ডিফাইন করতে পারি। এক্ষেত্রে এনিমেশনটি 0% থেকে শুরু করবে এবং 100% এ সম্পূর্ণ করবে।
শতকরা(%) ব্যবহার করে আপনি অনেক জটিল এবং কঠিন এনিমেশন তৈরি করতে পারেন।
নিম্নের উদাহরণে < div> এলিমেন্টি এনিমেশন চলাকালীন অবস্থায় ৪টি ব্যাকগ্রাউন্ড কালার পরিবর্তন করবেঃ
kt_satt_skill_example_id=1684
নিম্নের উদাহরণে < div> এলিমেন্টি এনিমেশনের সময় শতকরা(%) মান অনুযাই ব্যাকগ্রাউন্ড কালার এবং অবস্থান উভয় পরিবর্তন হবেঃ
kt_satt_skill_example_id=1685
বিলম্ব(Delay) এনিমেশন
animation-delay প্রোপার্টি নির্দেশ করে যে এনিমেশনটি কত সময়-কাল পর শুরু হবে।
নিচের উদাহরণে এনিমেশনটি শুরু হতে ২ সেকেন্ড বিলম্ব করবেঃ
kt_satt_skill_example_id=1686
এনিমেশন পুনরাবৃত্তি
animation-iteration-count প্রোপার্টি একটি এনিমেশন কতবার চলবে তা নির্দেশ করে।
নিম্নের উদাহরণে এনিমেশনটি ৩ বার চলার পর বন্ধ হবেঃ
kt_satt_skill_example_id=1688
নিম্নের উদাহরণে এনিমেশনটি সব-সময় চলতে থাকবে। আর এর জন্য animation-iteration-count প্রোপার্টি ভ্যালু "infinite" সেট করা হয়েছেঃ
kt_satt_skill_example_id=1689
এনিমেশন বিপরীত দিক
কোনো এনিমেশনকে বিপরীত দিক হতে চালু করার জন্য animation-direction প্রোপার্টি ব্যবহার করা হয়।
নিম্নের উদাহরণে এনিমেশনটিকে বিপরীত দিক হতে চালু করা হলোঃ
kt_satt_skill_example_id=1691
নিম্নের উদাহরণে এনিমেশনটিকে প্রথমে সামনের দিকে তারপর বিপরীত দিকে আবার সামনের দিকে চালু করার জন্য animation-direction প্রোপার্টি ভ্যালু "alternate" সেট করা হয়েছেঃ
kt_satt_skill_example_id=1692
এনিমেশনের বক্ররেখা গতিবিধি
এনিমেশনের বক্ররেখা গতি নিয়ন্ত্রন করার জন্য animation-timing-function প্রোপার্টি ব্যবহার করা হয়।
animation-timing-function প্রোপার্টির ভ্যালু গুলো নিম্নের দেওয়া হলোঃ
ease- এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ হবে। এটি ডিফল্ট।linear- এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।ease-in- এনিমেশনটি ধীর গতিতে শুরু হবে।ease-out- এনিমেশনটি ধীর গতিতে শেষ হবে।ease-in-out- এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।cubic-bezier(n,n,n,n)- এই ফাংশনের মাধ্যমে আপনার ইচ্ছেমত ভ্যালু নির্দিষ্ট করে দিতে পারেন।
নিচের উদাহরণে এনিমেশনের কিছু ভিন্ন ভিন্ন গতিবিধি দেখানো হলোঃ
এনিমেশন সংক্ষিত্ত প্রোপার্টি
নিম্নের উদাহরনে ছয়টি প্রোপার্টির ব্যবহার একত্রে দেখানো হয়েছেঃ
kt_satt_skill_example_id=1694
সংক্ষিত্ত প্রোপার্টি animation ব্যবহার করে উপরের এনিমেশন এর মতোই ইফেক্ট পাওয়া যায়ঃ
kt_satt_skill_example_id=1696
বিশেষ দ্রষ্টব্যঃ উপরের উদাহরণগুলো ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্বের ভার্সনে কাজ করে না
Read more
