این آموزش در تاریخ ۱۴۰۰/۱۱/۲۵ آپدیت شده است.
آموزش ویژگی transition-timing-function در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی transition-timing-function در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی transition-timing-function در CSS
با استفاده از ویژگی transition-timing-function در CSS میتوان یک تابع زمانی ( یا منحنی زمانی ) را با استفاده از یکسری کلمات کلیدی برای نحوه اجرا شدن عمل انتقال ( Transition ) مشخص و یا تعریف کرد.
مثلا میتونیم مشخص کنیم که عمل انتقال موقع شروع شدن آروم آروم شروع بشه و بعدش تند بشه و بعدش دوباره آروم آروم به پایان برسه و..
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی transition-timing-function را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.MyBox1{ transition-timing-function:linear; } .MyBox2{ transition-timing-function:ease-in; } .MyBox3{ transition-timing-function:ease-out; } .MyBox4{ transition-timing-function:ease-in-out; } .MyBox5{ transition-timing-function:steps(5,start); } .MyBox6{ transition-timing-function:cubic-bezier(0,0,0.58,1); } |
Free-Learn
جدول مشخصات ویژگی transition-timing-function در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ease |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.transitionTimingFunction=”linear”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی transition-timing-function در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| transition-timing-function | ۲۶ | ۱۶ | ۱۲٫۱ | ۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|steps(int,start_or_end)|cubic-bezier(n,n,n,n)|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی transition-timing-function در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| ease | مقدار پیش فرض – آروم شروع میشه بعد تند و در آخر آروم میشه | ||
| linear | با یه سرعت یکسان شروع و تا پایان ادامه دارد | ||
| ease-in | در شروع آروم میشه | ||
| ease-out | در پایان آروم میشه | ||
| ease-in-out | در شروع و پایان آروم میشه | ||
| steps(int,start_or_end) | پارامتر اول تعداد تکه تکه شدن ( باید عدد مثبت بزرگتر از ۰ باشه ) و پارامتر دوم اینکه از قسمت شروع باشه یا پایان مثال :
|
||
| cubic-bezier(n,n,n,n) | استفاده از مکعب بزیر، مقدارش باید یک عدد بین ۰ تا ۱ باشه مثال :
|
||
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر | ||
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
