transition-property বৈশিষ্ট্য

transition-property বৈশিষ্ট্যটি সেই CSS বৈশিষ্ট্যকে সেট করে যা transition-এর মসৃণ পরিবর্তনের মাধ্যমে অ্যানিমেটেড হবে। মান হিসাবে সেই CSS বৈশিষ্ট্যের নাম পাঠানো উচিত যা অ্যানিমেটেড হবে। যদি all মান নির্ধারণ করা হয় (এটি ডিফল্টভাবে সেট করা থাকে) - সমস্ত বৈশিষ্ট্য একসাথে অ্যানিমেটেড হবে।

সিনট্যাক্স

সিলেক্টর {
	transition-property: মান;
}

উদাহরণ

ব্লকের উপর মাউস নিন - এটি তার প্রস্থ ধীরে ধীরে পরিবর্তন করবে, কারণ transition-property-এর মান হল width:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

উদাহরণ . all মান

এই উদাহরণে transition-property-এর মান হল all - তাই hover অবস্থার জন্য লেখা সমস্ত বৈশিষ্ট্য ধীরে ধীরে পরিবর্তিত হবে (আমাদের ক্ষেত্রে এটি width এবং height)। সমস্ত পরিবর্তন একই সময়ের মধ্যে সম্পন্ন হবে, যা transition-duration-এ নির্ধারণ করা আছে:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

আরও দেখুন

transition-duration বৈশিষ্ট্য,
যা মসৃণ পরিবর্তনের সময়কাল নির্ধারণ করে
transition-delay বৈশিষ্ট্য,
যা মসৃণ পরিবর্তনের আগে বিলম্ব নির্ধারণ করে
transition-timing-function বৈশিষ্ট্য,
যা মসৃণ পরিবর্তনের জন্য টাইমিং ফাংশন নির্ধারণ করে
transition বৈশিষ্ট্য,
যা মসৃণ পরিবর্তনের জন্য সংক্ষিপ্ত রূপ
animation বৈশিষ্ট্য,
যার সাহায্যে অ্যানিমেশন তৈরি করা যায়