`transition` প্রোপার্টি ব্যবহার করে CSS প্রোপার্টি পরিবর্তনকে সময়সাপেক্ষে স্মুথ করা যায়।
উদাহরণ: ট্রানজিশন ইফেক্ট
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px; height: 100px; background: rgb(25, 0, 255);
border: 2px solid red; transition: width 2s;
}
.container:hover div { width: 100px; }
</style>
</head>
<body>
<h1>ট্রানজিশন ইফেক্ট উদাহরণ</h1>
<div class="container"><div></div></div>
<h2>উপরোক্ত ডিভের ওপর হোভার করলে প্রস্থ কমবে</h2>
</body>
</html>
কোড ব্যাখ্যা
- transition: width 2s: width প্রোপার্টি ২ সেকেন্ডে পরিবর্তন হবে।
- :hover ट्रিগার: হোভার করলে width ৩০০px থেকে ১০০px হবে।
- ট্রানজিশন সিনট্যাক্স: `transition: property duration timing-function delay;`
ট্রানজিশনেবল প্রোপার্টি
width, height, background-color, transform, opacity, margin, padding, font-size, color, border-color ইত্যাদি।
