این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع cubic-bezier در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع cubic-bezier در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع cubic-bezier در CSS
با استفاده از تابع cubic-bezier
در CSS میتوان یک منحنی زمانی ( برای اجرای مثلا یک انیمیشن ) توسط مکعب Bézier ( بزیر ) مشخص و یا تعریف کرد.
یا بطور کلی تر با استفاده از این تابع میتوان مشخص کرد که مثلا یک انیمیشن در طول زمان اجرا ، به چه شکل اجرا شود، ( مثلا اولش آروم شروع بشه و وسطاش تند شه و در پایان دوباره آروم و… )
لطفا به تصویر زیر توجه نمایید :
P0 نقطه شروع و P3 نقطه پایان می باشد که این نقاط همیشه ثابت می باشند و دارای مقادیری به ترتیب (۰,۰) و (۱,۱) می باشند و همچنین این مقادیر قابل تغییر نمی باشند.
و فقط نقاط P1 و P2 ( که میشه منحنی اجرا ) رو میتونیم با استفاده از مقادیری بین ۰ تا ۱ ( یا ۰٫۰ تا ۱٫۰ ) به دلخواه خودمون مشخص کنیم.
Free-Learn
مثال از تابع cubic-bezier در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
1 2 3 |
.MyBox { animation-timing-function: cubic-bezier(0.4, 1, 1, 0.1); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع cubic-bezier
در CSS پشتیبانی میکنند یا خیر.
نام تابع | Chrome | Firefox | Opera | Safari | Edge |
()cubic-bezier | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
1 |
cubic-bezier( x1, y1, x2, y2 ); |
Free-Learn
جدول مقادیر تابع cubic-bezier در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
مقدار | توضیح | ||||
---|---|---|---|---|---|
x1 , y1 , x2 , y2 | ضروری – یک مقدار عددی بین ۰ تا ۱ یا ۰٫۰ تا ۱٫۰ مثال :
|
Free-Learn
نکات و توضیحات
- از این تابع فقط میتوان در ویژگی های animation-timing-function و transition-timing-function استفاده کرد.