a11y.skipToMainContent
1

CSS Cubic Bezier Easing Generator

Craft CSS cubic-bezier easing curves by dragging control points and watch the easing play live, then copy the timing-function.

Drag the control points

Presets

Animation preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Cubic Bezier Generator

  1. اسحبوا نقاط المراقبة الزرقاء والوردية على المنحنى، أو من النوع X1, y1, x2, y2 القيم في المدخلات.
  2. اضغطي قبلاً من قبيل السهولة في الخروج أو الاسترخاء لتحميل منحنى مشترك أو متسرع.
  3. راقبي النقطه المتحركه مع تهدئتك، اضغطي على اللعب، ثم اضغطي على جهاز الاسطوانات المركزيه.

ما هذا؟?

المولدات الصوتية المشبوهة هي محرر تفاعلي لسلسلة CSS اسحب نقطتي المراقبة على ممر الوحدة لتشكل كيف يتسارع المحاكاة ويزيلها ثم تقرأ بدقة قيم الـ (كوديسكوبيكوزير) و(كودي) في أربعة مدخلات رقمية، أو قيم من النوع لنقل المقبض مباشرة. A built-in animation preview moves a dot across the track using your curve as the code.transition-timing-function/code., replaying automatically whenever you change a value or press Play./p. كل الحوسبة تحدث في جهازك عندما يَشْعرُ المنحنى صائباً، نَقْدمُ خطّ التوقيتِ المُعَدَّدِ للإسْتِخْدامِ إلى كُلّ إس إس إس إس إس إس إس إس إس إس إس إس إس إس إس إس إس
Advertisement

FAQ

ما الذي يفعله (كوبيك بيزيير) في (كاليفورنيا)؟?
يُعرّف المكعب المزيّر منحنى مخفف للانتقالات والتقديرات باستخدام نقطتي مراقبة (x1, y1, x2, y2). إنه يتحكم في سرعة المُحاكاة عبر الزمن، مما يجعلك تخلق آثاراً تتجاوز السهولة، والسهولة، والسهولة.
لماذا تقل قيم Y عن صفر أو أكثر من 1؟?
القيم العشرية ملتوية إلى صفر - 1 لأن الوقت لا يمكن أن يتراجع، ولكن القيم Y قد تمتد من نطاق 0 - 1 لخلق طلقات زائدة وتوقعات. هذا هو كيف 'عودة' و 'الوقاحة تتحرك بإيجاز الماضي أو قبل الهدف قبل تسوية.
كيف أستخدم المنحنى المولد؟?
(ب) أن تُعَلِّم القيمة المكعبة إلى إعلان انتقالي أو تقديري، على سبيل المثال: الانتقال: جميع الـ 0.3 مكعباً (0.42، 0، 0.58، 1)؛ المولد أيضاً يُنتج خطاً جاهزاً للتحرك الانتقالي يمكنك الرعي مباشرة.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement