`transition` প্রোপার্টি ব্যবহার করে হোভার অবস্থায় প্রোপার্টি পরিবর্তন (যেমন transform, background-color) স্মুথভাবে অ্যানিমেট করা যায়।
উদাহরণ: হোভার ট্রানজিশন
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
.scaleBtn {
display: inline-block; background-color: #0c1377; border: none; color: white;
padding: 16px 32px; text-align: center; font-size: 16px; transition: 0.3s; margin: 20px;
}
.scaleBtn:hover { transform: scale(1.5); }
</style>
</head>
<body>
<h1>হোভার ট্রানজিশন উদাহরণ</h1>
<button class="scaleBtn">এখানে হোভার করুন</button>
</body>
</html>
কোড ব্যাখ্যা
- transition: 0.3s: সব অ্যানিমেটেবল প্রোপার্টি ০.৩ সেকেন্ডে ট্রানজিশন হবে।
- transform: scale(1.5): হোভারে ১.৫ গুন বড় হবে।
- display: inline-block: ট্রান্সফর্মের জন্য ব্লক-লেভেল আচরণ দরকার।
সর্বোত্তম অনুশীলন
`transition: transform 0.3s ease-out;` মতো নির্দিষ্ট প্রোপার্টি এবং টাইমিং ফাংশন ব্যবহার করুন পারফরম্যান্সের জন্য।
