ما هو cubic-bezier؟

منحنى معرف بواسطة 4 قيم تحكم — يستخدمه CSS للانتقالات (transitions) والتحريكات (animations) للتحكم في معدل التغيير بمرور الوقت. "ease" في المتصفح هو cubic-bezier(0.25, 0.1, 0.25, 1).

ما هو التجاوز (overshoot)؟

عندما يتجاوز منحنى التليين 0 أو 1 (قيم y للتحكم 1)، فإن التحريك "يرتد" متجاوزًا نقاط نهايته. مفيد لواجهات المستخدم المرحة.

هل الإعدادات المسبقة متاحة؟

نعم — إعدادات مسبقة شائعة (خطي، ease، ease-in، ease-out، ease-in-out) بالإضافة إلى بعض المنحنيات المخصصة الشائعة.

هل المحرر مجاني؟

نعم — مجاني بالكامل، لا يتطلب التسجيل.

الألوان والتصميم

محرر Cubic Bezier

محرر cubic-bezier مجاني. صمم منحنيات التسهيل CSS بصرياً باستخدام مقابض السحب، الإعدادات المسبقة ومعاينة الانيميشن المباشرة. انسخ CSS للانتقالات والانيميشن.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

ملاحظة المحرر

Understanding · Time, but with feeling.

هذا الفصل المعمّق متاح حاليًا باللغة الإنجليزية فقط. أداة التحويل أعلاه تعمل بلغتك؛ أما المقال التفصيلي الطويل فلم تتم ترجمته بعد.

الأسئلة المتكررة

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

يبحث الأشخاص أيضًا عن

أدوات ذات صلة

More in this room.

شاهد الكل في الألوان والتصميم