محرر تخفيف Cubic-Bézier
صمّم منحنيات تخفيف cubic-bezier مخصّصة بمحرر قابل للسحب ومعاينة حركة حية.
اسحب المقبضين لتشكيل منحنى التخفيف.
transition-timing-function: —;
animation-timing-function: —;
كل شيء يعمل في متصفحك — لا يُرفع أي شيء.
حول محرر تخفيف Cubic-Bézier
محرّر تسهيل Cubic-Bézier يصمّم دوال توقيت مخصصة لانتقالات ورسوم CSS المتحركة. اسحب المقبضين على قماش المنحنى، وتتحدث قيمة cubic-bezier(x1, y1, x2, y2) مباشرة؛ تُشغِّل معاينة رسوم متحركة التسهيل بجانب مرجع خطي حتى تشعر بالفرق، مع مدة قابلة للضبط وإعادة تشغيل فورية.
عشرة إعدادات مسبقة تغطي المفردات الشائعة — التسهيل القياسي، وease-in، وease-out، وease-in-out، بالإضافة إلى منحنيات تعبيرية مثل back وanticipate التي تتجاوز نقاط نهايتها، وانحدارات accelerate وdecelerate بأسلوب material. استخدمها كما هي أو كنقاط انطلاق تسحبها إلى شيء خاص بك.
يمكنك أيضاً كتابة إحداثيات نقاط التحكم الدقيقة، والضغط على عشوائي للإلهام، ونسخ إما قيمة cubic-bezier() المجرَّدة أو قاعدة CSS جاهزة للصق. المحرّر بأكمله يعمل في متصفحك.
كيفية استخدام محرر تخفيف Cubic-Bézier
- اسحب المقبضين على محرّر المنحنى لتشكيل التسهيل.
- انقر إعادة التشغيل وقارن الرسوم المتحركة المسهَّلة مع المرجع الخطي، مع ضبط المدة إذا لزم.
- جرّب الإعدادات المسبقة — ease، back، anticipate، material والمزيد — للحصول على بداية سريعة.
- اضبط بدقة باستخدام مدخلات نقاط التحكم الرقمية للحصول على قيم دقيقة.
- انسخ قيمة cubic-bezier() أو مقتطف CSS الكامل.