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

বৈশিষ্ট্য transition-delay transition এর মসৃণ রূপান্তর শুরু করার আগে বিলম্ব সেট করে।

সিনট্যাক্স

সিলেক্টর {
	transition-delay: s বা ms এ সময়;
}

মান

মান	বর্ণনা
`s`	সেকেন্ডে সময় নির্দিষ্ট করে (উদাহরণস্বরূপ `3s`)। ভগ্নাংশ মান নির্দিষ্ট করা যেতে পারে, উদাহরণস্বরূপ, `0.5s` - আধা সেকেন্ড।
`ms`	মিলিসেকেন্ডে সময় নির্দিষ্ট করে (উদাহরণস্বরূপ `3ms`)। এক সেকেন্ড হল `1000` মিলিসেকেন্ড।

ডিফল্ট মান: 0s।

উদাহরণ

ব্লকটির উপর মাউস নিন - 3 সেকেন্ড কিছুই ঘটবে না (3s বিলম্ব সেট আছে), এবং তারপর এটি 2 সেকেন্ডে তার প্রস্থ মসৃণভাবে পরিবর্তন করবে। তারপর যদি মাউস সরানো হয় - আবার 3 সেকেন্ড কিছুই ঘটবে না, এবং তারপর প্রস্থ মসৃণভাবে প্রারম্ভিক মান পর্যন্ত হ্রাস পাবে:

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

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

উদাহরণ

ব্লকটির উপর মাউস নিন - এটি প্রথমে তার প্রস্থ 2 সেকেন্ডে পরিবর্তন করবে, এবং তারপর তার উচ্চতা 4 সেকেন্ডে পরিবর্তন করবে। বৈশিষ্ট্যগুলি ক্রমান্বয়ে পরিবর্তিত হবে, কারণ উচ্চতার জন্য 3 সেকেন্ড বিলম্ব সেট আছে (প্রস্থ পরিবর্তনের সময়)। যদি মাউস সরানো হয় - তাহলে পরিবর্তনগুলি বিপরীত ক্রমে ঘটবে: প্রথমে প্রস্থ হ্রাস পাবে, এবং তারপর উচ্চতা হ্রাস পাবে:

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

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

আরও দেখুন

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