বৈশিষ্ট্য 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,
যার মাধ্যমে অ্যানিমেশন তৈরি করা যায়