سازنده CSS Cubic Bezier

منحنی از پایین-چپ (شروع) به بالا-راست (پایان) حرکت می‌کند، به طوری که زمان از چپ به راست و پیشرفت به سمت بالا حرکت می‌کند. دو دستگیره، نقاط کنترلی هستند که آن را خم می‌کنند — هر کدام دارای یک X و یک Y هستند، بنابراین با هم فرمول cubic-bezier(x1, y1, x2, y2) را تشکیل می‌دهند. مقدار X بین ۰ و ۱ باقی می‌ماند، در حالی که Y می‌تواند بالاتر از سقف یا پایین‌تر از کف برود تا حرکت قبل از سکون، دچار پرش اضافی یا عقب‌گرد شود.

مقدار cubic-bezier() را کپی کنید و در هر جایی که تابع زمان‌بندی (timing function) قرار می‌گیرد قرار دهید — مانند transition-timing-function، animation-timing-function یا به صورت مختصر، برای مثال: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). کلمات کلیدی ease، ease-in، ease-out و ease-in-out صرفاً منحنی‌های ثابت cubic-bezier هستند، بنابراین انتخاب هر یک از این پیش‌فرض‌ها مقدار دقیق پشت آن کلمه کلیدی را به شما نشان می‌دهد.

به تنهایی خیر. یک cubic-bezier منفرد می‌تواند حالت پیش‌بینی و پرش اضافی (overshoot) داشته باشد — پیش‌فرض‌های "back" با کشیدن یکی از دستگیره‌ها به خارج از کادر دقیقاً همین کار را انجام می‌دهند — اما فقط می‌تواند در یک جهت حرکت کند و سپس متوقف شود. افکت‌های ارتجاعی (bounce) و کشسانی (elastic) جهت حرکت را چندین بار معکوس می‌کنند که هیچ منحنی cubic-bezier منفردی نمی‌تواند آن را توصیف کند؛ برای این کارها به فریم‌های کلیدی (keyframes) در CSS یا تابع linear() با چندین گام نیاز دارید.