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

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

সিনট্যাক্স

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

উদাহরণ

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

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

css#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-এ নির্ধারণ করা আছে:

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

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

Результат:

আরও দেখুন