تابع cubic-bezier() در CSS برای تعریف انیمیشنها و انتقالهای سفارشی استفاده میشود. با این تابع میتوانید سرعت حرکت عناصر را به صورت دقیق و غیرخطی تنظیم کنید. برای آموزش کامل CSS و مثالهای عملی، به دوره آموزش CSS مراجعه کنید.
ساختار تابع cubic-bezier()
تابع cubic-bezier() چهار پارامتر عددی میگیرد که منحنی سرعت انیمیشن را تعیین میکنند:
cubic-bezier(p1, p2, p3, p4)که هر پارامتر عددی بین 0 و 1 است و موقعیت منحنی Bezier را مشخص میکند.
مثال عملی
نمونه استفاده از cubic-bezier برای انیمیشن:
.box {
transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.box:hover {
transform: translateX(100px);
}جدول پارامترها و توضیحات
| پارامتر | توضیح |
|---|---|
| p1 | مقدار x نقطه کنترل اول (0-1) |
| p2 | مقدار y نقطه کنترل اول (0-1) |
| p3 | مقدار x نقطه کنترل دوم (0-1) |
| p4 | مقدار y نقطه کنترل دوم (0-1) |
نکات مهم
- تابع cubic-bezier() امکان ساخت انیمیشنهای طبیعی و سفارشی را فراهم میکند.
- مقدار پیشفرض برای ease: cubic-bezier(0.25, 0.1, 0.25, 1)
- برای انیمیشنهای linear از linear() و برای ease-in/out از توابع آماده CSS میتوان استفاده کرد.
- ترکیب cubic-bezier با transition یا animation رایج است.
ادامه آموزش
برای یادگیری بیشتر CSS و انیمیشنهای حرفهای، حتماً دوره آموزش CSS را مشاهده کنید.
آموزش قبلی: آموزش تابع calc در CSS
آموزش بعدی: آموزش تابع hsl در CSS
دیدگاه و پرسش