সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলোকে একটা প্রদত্ত সময় কাল ধরে (অন্য এক মান থেকে) মসৃণভাবে পরিবর্তন করে।
উদাহরণ: সিএসএস(৩) ট্রানজিশন ইফেক্ট দেখার জন্য নিচের এলিমেন্টের উপর মাউস হোভার করুন
ট্রাঞ্জিশন
সিএসএস(৩) ট্রানজিশন প্রোপার্টি
নিচের টেবিলে সকল ট্রানজিশন প্রোপার্টি দেখানো হল :
সিএসএস(৩) ট্রানজিশন কিভাবে ব্যবহার করা হয় ?
একটি ট্রানজিশন ইফেক্ট তৈরি করতে আপনাকে অবশ্যই দু'টি বিষয় নির্দিষ্ট করতে হবে
- একটি সিএসএস প্রোপার্টি যেটাতে আপনি ইফেক্ট যুক্ত করতে চান
- ইফেক্টের সময়কাল।
নোট : যদি সময়ব্যাপ্তি নির্ধারণ করা না হয় তবে ইফেক্টের কোন ট্রানজিশন হবে না কারণ এটির ডিফল্ট মান 0 থাকে।
নিচের উদাহরণে দেখানো হয়েছে একটি 120px * 120px সবুজ <div> এলিমেন্ট। এই <div> এলিমেন্ট এ width প্রোপার্টির ট্রানজিশন ইফেক্ট যুক্ত করা হয়েছে যার সময়ব্যাপ্তি ৩ সেকেন্ড অর্থাৎ ইফেক্টটি ৩ সেকেন্ড ধরে কাজ করবে :
kt_satt_skill_example_id=1648
যখন সিএসএস প্রোপার্টি তার মান পরিবর্তন করবে তখন ইফেক্টটি কাজ শুরু করবে।
এখন, width প্রোপার্টির একটি নতুন ভ্যালু নির্দিষ্ট করে যখন ব্যবহারকারী তার মাউস <div> এলিমেন্টের উপর নিয়ে যাবেঃ
div:hover {
width: 400px;
}
লক্ষ্য করুন যখন মাউসটি এলিমেন্টের উপর থেকে সরিয়ে নেয়া হয় তখন এটি আবার ধীরে ধীরে আগের অবস্থানে ফিরে যায়।
বিভিন্ন প্রোপার্টির ভ্যালু পরিবর্তন
নিচের উদাহরণে width এবং height উভয় প্রোপার্টির জন্য ট্রানজিশন ইফেক্ট ব্যবহার করা হয়েছে এখানে width এর জন্য সময়ব্যাপ্তি ৩ সেকেন্ড এবং height এর জন্য ৪ সেকেন্ড নির্ধারণ করা হয়েছে :
kt_satt_skill_example_id=1649
ট্রানজিশনে বক্ররেখার গতি নির্দিষ্ট
transition-timing-function প্রোপার্টি দ্বারা ট্রানজিশনে বক্ররেখার গতিকে নির্দেশ করা হয়।
transition-timing-function প্রোপার্টির জন্য নিচের ভ্যালুগুলো ব্যবহার করা যেতে পারে :
ease- এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ করবে (এটি ডিফল্ট)।linear- এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।ease-in- এনিমেশনটি ধীর গতিতে শুরু হবে।ease-out- এনিমেশনটি ধীর গতিতে শেষ হবে।ease-in-out- এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।cubic-bezier(n,n,n,n)- cubic-bezier ফাংশনে আপনি আপনার ভ্যালু নির্ধারণ করতে পারেন।
নিচের উদাহরণে ব্যবহারযোগ্য কিছু ভিন্ন ভিন্ন গতির বক্ররেখা দেখানো হয়েছে :
kt_satt_skill_example_id=1650
বিলম্ব (Delay) ট্রানজিশন ইফেক্ট
transition-delay প্রোপার্টির নির্দেশ করে যে ট্রানজিশন ইফেক্টটি বিলম্বে শুরু হবে
নিচের উদাহরণে ট্রানজিশন ইফেক্টটি শুরু হতে ১ সেকেন্ড বিলম্ব করেঃ
kt_satt_skill_example_id=1651
ট্রানজিশন + ট্রান্সফর্মেশন
নিচের উদাহরণে ট্রানজিশন ইফেক্টের মধ্যে ট্রান্সফর্মেনশন যুক্ত করা হয়েছেঃ
kt_satt_skill_example_id=1652
ট্রানজিশনের আরও উদাহরণ
সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলো একটি একটি করে নির্ধারণ করা যায় :
kt_satt_skill_example_id=1653
অথবা transition শর্টহ্যান্ড প্রোপার্টি ব্যবহার করেও নির্ধারণ করা যায়ঃ
kt_satt_skill_example_id=1654
নোটঃ উপরের উদাহরণগুলো ইন্টারন্টে এক্সপ্লোরার ৯ এবং আগের ভার্সনে কাজ করবে না।
ট্রানজিশনের জন্য ব্রাউজার সাপোর্ট
টেবিলের নাম্বার গুলো নির্দেশ করে ব্রাউজারের প্রথম ভার্সন, যেটি প্রোপার্টিকে সম্পুর্নভাবে সাপোর্ট করে।
ব্রাউজার সাপোর্ট
Read more
