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

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

সিনট্যাক্স

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

মান

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

উদাহরণ

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

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

css#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 সেকেন্ড বিলম্ব সেট আছে (প্রস্থ পরিবর্তনের সময়)। যদি মাউস সরানো হয় - তাহলে পরিবর্তনগুলি বিপরীত ক্রমে ঘটবে: প্রথমে প্রস্থ হ্রাস পাবে, এবং তারপর উচ্চতা হ্রাস পাবে:

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

css#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;
}

Результат:

আরও দেখুন