آموزش تابع cubic-bezier در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع cubic-bezier در CSS با من همراه باشید.

آموزش تابع cubic-bezier در CSS

Free-Learn

تابع cubic-bezier در CSS

با استفاده از تابع cubic-bezier در CSS میتوان یک منحنی زمانی ( برای اجرای مثلا یک انیمیشن ) توسط مکعب Bézier ( بزیر ) مشخص و یا تعریف کرد.

یا بطور کلی تر با استفاده از این تابع میتوان مشخص کرد که مثلا یک انیمیشن در طول زمان اجرا ، به چه شکل اجرا شود، ( مثلا اولش آروم شروع بشه و وسطاش تند شه و در پایان دوباره آروم و… )

لطفا به تصویر زیر توجه نمایید :

آموزش تابع cubic-bezier در CSS

P0 نقطه شروع و P3 نقطه پایان می باشد که این نقاط همیشه ثابت می باشند و دارای مقادیری به ترتیب (۰,۰) و (۱,۱) می باشند و همچنین این مقادیر قابل تغییر نمی باشند.

و فقط نقاط P1 و P2 ( که میشه منحنی اجرا ) رو میتونیم با استفاده از مقادیری بین ۰ تا ۱ ( یا ۰٫۰ تا ۱٫۰ ) به دلخواه خودمون مشخص کنیم.

Free-Learn

مثال از تابع cubic-bezier در CSS

در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع cubic-bezier در CSS پشتیبانی میکنند یا خیر.

نام تابع Chrome Firefox Opera Safari IE
()cubic-bezier ۴٫۰ ۴٫۰ ۱۰٫۵ ۳٫۱ ۱۰٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر تابع cubic-bezier در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.

مقدار توضیح
x1 , y1 , x2 , y2 ضروری – یک مقدار عددی بین ۰ تا ۱ یا ۰٫۰ تا ۱٫۰
مثال :

Free-Learn

نکات و توضیحات

از این تابع فقط میتوان در ویژگی های animation-timing-function و transition-timing-function استفاده کرد.

Free-Learn

دریافت PDF یا پرینت این مطلب