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

নোটঃ উপরের উদাহরণগুলো ইন্টারন্টে এক্সপ্লোরার ৯ এবং আগের ভার্সনে কাজ করবে না।

ট্রানজিশনের জন্য ব্রাউজার সাপোর্ট

টেবিলের নাম্বার গুলো নির্দেশ করে ব্রাউজারের প্রথম ভার্সন, যেটি প্রোপার্টিকে সম্পুর্নভাবে সাপোর্ট করে।

ব্রাউজার সাপোর্ট