transition প্রপার্টি

transition প্রপার্টি - মসৃণ পরিবর্তনের জন্য সংক্ষিপ্ত, এটি একই সাথে transition-duration, transition-property, transition-timing-function এবং transition-delay সেট করতে দেয়।

সিনট্যাক্স

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

প্রপার্টিগুলোর ক্রম কোনো বিষয় নয়, তবে সময়কাল (transition-duration) বিলম্বের (transition-delay) আগে থাকতে হবে।

মানসমূহ

সংশ্লিষ্ট প্রপার্টিগুলো দেখুন। ডিফল্ট মান: all 0s ease 0s।

none মান সব পরিবর্তন বাতিল করে (সেগুলো তাৎক্ষণিকভাবে ঘটবে)।

উদাহরণ

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

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

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

আরও দেখুন