کیوبک-بیزیئر ایزنگ ایڈیٹر

تمام ٹولز

گھسیٹنے کے قابل ایڈیٹر اور لائیو اینیمیشن پیش منظر کے ساتھ حسب ضرورت cubic-bezier ایزنگ کرو ڈیزائن کریں۔

کرو ایڈیٹر
1 2 0 1 0 1 وقت پیش رفت

ایزنگ کرو کی شکل بنانے کے لیے دونوں ہینڈلز کو گھسیٹیں۔

اینیمیشن پیش منظر
ایزڈ
لکیری
بھریں
1.2s
کنٹرول پوائنٹس
پوائنٹ 1
پوائنٹ 2
پری سیٹس
ویلیو
cubic-bezier(0, 0, 1, 1)
CSS آؤٹ پٹ
transition-timing-function: —; animation-timing-function: —;

سب کچھ آپ کے براؤزر میں چلتا ہے — کچھ بھی اپ لوڈ نہیں ہوتا۔

کیوبک-بیزیئر ایزنگ ایڈیٹر کے بارے میں

Cubic-Bézier Easing Editor CSS ٹرانزیشنز اور اینیمیشنز کے لیے کسٹم ٹائمنگ فنکشنز ڈیزائن کرتا ہے۔ کرو کینوس پر دو کنٹرول ہینڈلز کھینچیں اور cubic-bezier(x1, y1, x2, y2) ویلیو لائیو اپڈیٹ ہوتی ہے؛ ایک اینیمیشن پیش منظر لینیئر ریفرنس کے ساتھ easing چلاتا ہے تاکہ آپ فرق محسوس کر سکیں، ایک ایڈجسٹ ایبل دورانیہ اور فوری ری پلے کے ساتھ۔

دس پری سیٹس عام ذخیرہ الفاظ کا احاطہ کرتے ہیں — معیاری ease، ease-in، ease-out اور ease-in-out، اس کے علاوہ back اور anticipate جیسے تاثراتی کرو جو اپنے اختتامی نقطوں سے آگے نکل جاتے ہیں، اور material-style accelerate اور decelerate ریمپس۔ انہیں جوں کے توں استعمال کریں یا اپنی چیز میں کھینچنے کے لیے ابتدائی نقطہ بنائیں۔

آپ عین کنٹرول-پوائنٹ کوآرڈینیٹس بھی ٹائپ کر سکتے ہیں، تحریک کے لیے randomize دبا سکتے ہیں، اور یا تو خالص cubic-bezier() ویلیو یا تیار-پیسٹ CSS رول کاپی کر سکتے ہیں۔ پورا ایڈیٹر آپ کے براؤزر میں چلتا ہے۔

کیوبک-بیزیئر ایزنگ ایڈیٹر استعمال کرنے کا طریقہ

  1. easing کو شکل دینے کے لیے کرو ایڈیٹر پر دونوں ہینڈلز کھینچیں۔
  2. Replay کلک کریں اور eased اینیمیشن کا لینیئر ریفرنس سے موازنہ کریں، ضرورت پڑنے پر دورانیہ ایڈجسٹ کریں۔
  3. فوری آغاز نقطے کے لیے پری سیٹس آزمائیں — ease، back، anticipate، material اور مزید۔
  4. عین ویلیوز کے لیے نمبری کنٹرول-پوائنٹ ان پٹس کے ساتھ باریک ٹیوننگ کریں۔
  5. cubic-bezier() ویلیو یا مکمل CSS اسنپٹ کاپی کریں۔

اکثر پوچھے جانے والے سوالات

یہ دو کنٹرول پوائنٹس کے کوآرڈینیٹس ہیں: x1، y1، x2، y2۔ x محور وقت ہے (0 سے 1) اور y محور اینیمیشن کی پیش رفت ہے۔ ابتدا میں اونچے کھینچے گئے نقطے حرکت کو تیز شروع کراتے ہیں؛ نیچے کھینچے جائیں تو یہ آہستہ شروع ہوتی ہے۔

y ویلیوز جا سکتی ہیں۔ 1 سے اوپر y اینیمیشن کو اپنے ہدف سے آگے نکال کر واپس ٹھہرا دیتا ہے — "back" اور "anticipate" پری سیٹس بالکل یہی کرتے ہیں۔ x ویلیوز کو 0 اور 1 کے درمیان رہنا چاہیے، کیونکہ وقت پیچھے نہیں جا سکتا۔

کسی بھی CSS transition-timing-function یا animation-timing-function میں، اور Web Animations API کے easing آپشن میں۔ یہ ease-in-out جیسے کی ورڈز کی جگہ آپ کے انٹرفیس کے مطابق ٹیون شدہ کرو لے لیتا ہے۔

اسکرین میں داخل ہونے والے یا ان پٹ کا جواب دینے والے عناصر کے لیے ease-out (تیز آغاز، نرم اختتام) استعمال کریں — یہ فوری محسوس ہوتا ہے۔ اسکرین سے نکلنے والے عناصر کے لیے ease-in استعمال کریں۔ Ease-in-out ان حرکات کے لیے موزوں ہے جہاں دونوں سرے نظر آتے ہوں۔

جی ہاں، یہ بغیر کسی اکاؤنٹ کے مفت ہے، اور یہ مکمل طور پر آپ کے براؤزر میں چلتا ہے — آپ جو ڈیزائن کرتے ہیں وہ کچھ بھی اپ لوڈ نہیں ہوتا۔
شیئر کریں
متعلقہ ٹولز
Email Signature Builder 30 ٹیمپلیٹس میں سے ایک پیشہ ور HTML ای میل دستخط ڈیزائن کریں، اسے حسب ضرورت بنائیں اور محفوظ کریں۔ مفت
آئیکن سے PNG Bootstrap Icons، Font Awesome اور مزید کو کسٹم PNG تصاویر میں تبدیل کریں — مفت، اپنے براؤزر میں۔ مفت
ایپ آئیکن جنریٹر App Store اور Google Play کے لیے ایک مکمل، اسٹور-تیار ایپ آئیکن سیٹ بنائیں — پریمیم گریڈینٹ، میش اور پیٹرن پس منظر، آپ کے لوگو سے تیار۔ مفت
Favicon جنریٹر کسی لوگو، فونٹ آئیکن یا مونوگرام سے ایک مکمل favicon پیکیج بنائیں — favicon.ico، جدید PNGs، Apple touch آئیکن، PWA آئیکنز، ویب مینی فیسٹ اور HTML سنیپٹ۔ مفت
CSS Box Shadow Generator آفسیٹ، بلر، اسپریڈ، رنگ، opacity اور inset کے لائیو سلائیڈرز کے ساتھ لیئرڈ CSS box-shadows بنائیں — ایک حقیقی عنصر پر پیش نظارہ کریں اور فوری طور پر پیسٹ کے لیے تیار CSS کاپی کریں۔ مفت
CSS بارڈر ریڈیئس جنریٹر لائیو پیش منظر کے ساتھ CSS border-radius کو بصری طور پر بنائیں اور پروڈکشن کے لیے تیار کوڈ کاپی کریں۔ مفت
مقبول تلاشیں
کیوبک بیزیئر ایزنگ ایڈیٹر cubic-bezier جنریٹر css css ایزنگ فنکشن جنریٹر css ٹرانزیشن ٹائمنگ فنکشن اینیمیشن ایزنگ کرو ایڈیٹر حسب ضرورت بیزیئر کرو css ease-in-out کیوبک بیزیئر
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔
مسئلہ رپورٹ کریں

اس مفت ٹول کو اپنی ویب سائٹ پر شامل کریں — نیچے دیا گیا کوڈ کاپی اور پیسٹ کریں۔