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

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

সিনট্যাক্স

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

মানসমূহ

মান	বর্ণনা
`ease`	প্রথমে ধীরে, তারপর দ্রুত, শেষে আবার ধীরে।
`ease-in`	ধীরে শুরু হয় এবং ধীরে ধীরে গতি বৃদ্ধি পায়।
`ease-out`	দ্রুত শুরু হয় এবং ধীরে ধীরে থামে।
`ease-in-out`	প্রথমে ধীরে, তারপর দ্রুত, শেষে আবার ধীরে। ease থেকে গতির পার্থক্য রয়েছে।
`linear`	সর্বদা একই গতি বজায় থাকে।
`step-start`	কোনো অ্যানিমেশন নেই, বৈশিষ্ট্যটি অবিলম্বে চূড়ান্ত মান গ্রহণ করে।
`step-end`	কোনো অ্যানিমেশন নেই, বৈশিষ্ট্যটি `transition-duraton`-এ নির্দিষ্ট সময়ের জন্য অপেক্ষা করে, এবং তারপর অবিলম্বে চূড়ান্ত মান গ্রহণ করে।
`steps`	বৈশিষ্ট্যের মান লাফিয়ে লাফিয়ে পরিবর্তিত হয়।
`cubic-bezier`	বেজিয়ার কার্ভ, যা যেকোনো অ্যানিমেশন নির্দিষ্ট করতে পারে। দেখুন বেজিয়ার কার্ভ জেনারেটর।

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

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

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

উদাহরণ

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

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

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

আরও দেখুন

বৈশিষ্ট্য transition-duration,
যা মসৃণ রূপান্তরের সময়কাল নির্দিষ্ট করে
বৈশিষ্ট্য transition-property,
যা মসৃণ রূপান্তরের জন্য বৈশিষ্ট্যের নাম নির্দিষ্ট করে
বৈশিষ্ট্য transition-delay,
যা মসৃণ রূপান্তরের আগে বিলম্ব নির্দিষ্ট করে
বৈশিষ্ট্য transition,
যা মসৃণ রূপান্তরের জন্য সংক্ষিপ্ত রূপ
বৈশিষ্ট্য animation,
যার মাধ্যমে অ্যানিমেশন তৈরি করা যায়