CSS animation-timing-function প্রোপার্টি
- পূর্ববর্তী পৃষ্ঠা animation-play-state
- পরবর্তী পৃষ্ঠা aspect-ratio
বিবরণ ও ব্যবহার
animation-timing-function অ্যানিমেশন গতিক্রম নির্ধারণ করুন。
গতিক্রম সরলতা পরিবর্তনকারী সময়কাল নির্ধারণ করে যেভাবে CSS শৈলী থেকে আরেকটি শৈলীতে অ্যানিমেশন হয়。
গতিক্রম সরলতা দেওয়ার জন্য ব্যবহৃত হয়。
আরও দেখুন:
CSS3 ট্যুটোরিয়াল:CSS অ্যানিমেশন
HTML DOM রেফারেন্স ম্যানুয়েল:animationTimingFunction প্রতিভূতি
উদাহরণ
উদাহরণ 1
শুরু থেকে শেষ পর্যন্ত একই গতিতে অ্যানিমেশন প্লে করুন:
div
{
animation-timing-function:2s;
}
উদাহরণ 2
ভিন্ন সময়কালীন ফাংশনের মানগুলির বোঝাপড়ার জন্য এখানে পাঁচটি ভিন্ন মানের div ইলেকট্রনিক্স প্রদান করা হয়েছে:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
উদাহরণ 3
এই উদাহরণের মতোই, কিন্তু cubic-bezier ফাংশনের মাধ্যমে গতি গ্রাফ নির্দেশ করা হয়:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
CSS গঠনশৈলী
animation-timing-function: value;
animation-timing-function একটি নামকরা ত্রিকোণবৃত্ত (Cubic Bezier) ফাংশন ব্যবহার করে, যা গতি গ্রাফ তৈরি করে। এই ফাংশনের মধ্যে আপনি নিজস্ব মান ব্যবহার করতে পারেন এবং প্রস্তুত মানও ব্যবহার করতে পারেন:
| মান | বর্ণনা | পরীক্ষা |
|---|---|---|
| linear | এনাইমেশন থেকে শেষ পর্যন্ত গতি একই হয়。 | পরীক্ষা |
| ease | ডিফল্ট। এনাইমেশন নিচু গতিতে শুরু করে, এবং তারপর গতি বাড়ে, শেষ পর্যন্ত নিচু হয়ে যায়。 | পরীক্ষা |
| ease-in | এনাইমেশন নিচু গতিতে শুরু করে。 | পরীক্ষা |
| ease-out | এনাইমেশন নিচু গতিতে শেষ করে。 | পরীক্ষা |
| ease-in-out | এনাইমেশন নিচু গতিতে শুরু এবং শেষ করে。 | পরীক্ষা |
| cubic-bezier(n,n,n,n) | cubic-bezier ফাংশনের নিজস্ব মান। সম্ভাব্য মান 0 থেকে 1 এর মধ্যে কোনও সংখ্যা। |
সুঝাওয়া:অধীনের "আপনার হাতে পরীক্ষা করুন" ফিউচারে বিভিন্ন মান ব্যবহার করে প্রয়াস করুন。
প্রযুক্তিগত বিবরণ
| ডিফল্ট মান: | ease |
|---|---|
| পুনর্বহূক্তি: | no |
| সংস্করণ: | CSS3 |
| JavaScript গঠনশৈলী: | object.style.animationTimingFunction="linear" |
ব্রাউজার সমর্থন
টেবিলের সংখ্যা এই বৈশিষ্ট্যটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে。
সম্প্রসারণ -webkit-、-moz- বা -o- দ্বারা ব্যবহৃত সংখ্যা প্রথম সংস্করণের প্রয়োগকারী প্রিফিক্সকে নির্দেশ করে。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
- পূর্ববর্তী পৃষ্ঠা animation-play-state
- পরবর্তী পৃষ্ঠা aspect-ratio
