বৈশিষ্ট্য transition-timing-function

বৈশিষ্ট্য transition-timing-function মসৃণ রূপান্তর transition-এর পরিবর্তনের গতি (ত্বরণ) সেট করে। উদাহরণস্বরূপ, প্রথমে ধীরে, তারপর দ্রুত, তারপর আবার ধীরে ইত্যাদি।

সিনট্যাক্স

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

মানসমূহ

ডিফল্ট মান: ease।

বিভিন্ন মানের তুলনা

নিচে উপস্থাপিত ব্লকগুলির উপর মাউস নিয়ে যান, সমস্ত ধরণের টাইমিং ফাংশনের কাজ দেখতে পাবেন:

উদাহরণ

ব্লকের উপর মাউস নিয়ে যান - এটি 2 সেকেন্ডে তার প্রস্থ মসৃণভাবে পরিবর্তন করবে। যেহেতু ease-in মান সেট করা আছে, তাই অ্যানিমেশন ধীরে শুরু হবে এবং ধীরে ধীরে গতি বৃদ্ধি পাবে:

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

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

Результат:

আরও দেখুন