CSS transition-timing-function এক্সিফোর্ট
- পূর্ববর্তী পৃষ্ঠা transition-property
- পরবর্তী পৃষ্ঠা translate
সংজ্ঞা ও ব্যবহার
transition-timing-function প্রতিভূতি পার্সেল ইফেক্টের গতি পথ নির্ধারণ করে
এই প্রতিভূতি পার্সেল ইফেক্টকে সময়ের সাথে পরিবর্তন করতে অনুমতি দেয়
আরও দেখুন:
CSS শিক্ষাক্রম:CSS ট্রানসিশন
HTML DOM সংক্ষিপ্ত পরিচ্ছেদ:transitionTimingFunction প্রতিভূতি
একক
উদাহরণ 1
একই গতিতে শুরু থেকে শেষ পর্যন্ত পার্সেল ইফেক্ট:
div
{
transition-timing-function: linear;
}
CSS ব্যবহার শৈলী
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
প্রতিভূতি মান
| মান | বর্ণনা |
|---|---|
| linear | একই গতিতে শুরু থেকে শেষ পর্যন্ত পার্সেল ইফেক্ট (cubic-bezier(0,0,1,1) সমান) |
| ease | কম গতিতে শুরু, তারপর দ্রুত হয়ে যাওয়া, শেষে কম গতিতে শেষ হওয়া পার্সেল ইফেক্ট (cubic-bezier(0.25,0.1,0.25,1)) |
| ease-in | কম গতিতে শুরু হওয়া পার্সেল ইফেক্ট নির্ধারণ (cubic-bezier(0.42,0,1,1) সমান) |
| ease-out | কম গতিতে শেষ হওয়া পার্সেল ইফেক্ট নির্ধারণ (cubic-bezier(0,0,0.58,1) সমান) |
| ease-in-out | কম গতিতে ভাবে শুরু ও শেষ হওয়া পার্সেল ইফেক্ট নির্ধারণ (cubic-bezier(0.42,0,0.58,1) সমান) |
| cubic-bezier(n,n,n,n) | cubic-bezier ফাংশনে নিজের মান নির্ধারণ করুন। সম্ভব মান 0 থেকে 1 পর্যন্ত সংখ্যা |
টীকা:বিভিন্ন মানকে পরীক্ষা করুন, এরফলে তাদের কার্যকরণ বোঝা সহজ হবে。
কারিগরি বিবরণ
| ডিফল্ট মান: | ease |
|---|---|
| প্রত্যয়ীতি: | no |
| সংস্করণ: | CSS3 |
| JavaScript য়াক্সিস | object.style.transitionTimingFunction="linear" |
আরও উদাহরণ
উদাহরণ 2
বিভিন্ন ফাংশন মানকের বোঝাপড়া করার জন্য, নিচের পাঁচটি ভিন্ন মানবিশিষ্ট div ইউনিটগুলিকে দেখুন:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
উদাহরণ 3
উপরোক্ত উদাহরণের মতো, কিন্তু cubic-bezier-এর মাধ্যমে গতিকে নির্দিষ্ট করে:
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
ব্রাউজার সমর্থন
টেবিলের সংখ্যাগুলি এই প্রক্রিয়াটির পূর্ণাঙ্গ সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে।
প্রিফিক্স হিসাবে -webkit-、-moz- বা -o- এর সাথে সংখ্যা প্রথম সংস্করণ ব্যবহার করা হয়。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
- পূর্ববর্তী পৃষ্ঠা transition-property
- পরবর্তী পৃষ্ঠা translate
