עורך עקומות האטה Cubic-Bézier
עצב עקומות האטה cubic-bezier מותאמות אישית עם עורך הניתן לגרירה ותצוגה מקדימה חיה של אנימציה.
גרור את שתי הידיות כדי לעצב את עקומת ההאטה.
transition-timing-function: —;
animation-timing-function: —;
הכול פועל בדפדפן שלך — שום דבר לא מועלה.
אודות עורך עקומות האטה Cubic-Bézier
עורך הרכה קובית-בזייה מעצב פונקציות תזמון מותאמות אישית עבור מעברי ואנימציות CSS. גררו את שני ידיות הבקרה על משטח העקומה וערך ה-cubic-bezier(x1, y1, x2, y2) מתעדכן בזמן אמת; תצוגה מקדימה של אנימציה מנגנת את ההרכה לצד רפרנס ליניארי כך שתוכלו להרגיש את ההבדל, עם משך זמן ניתן להתאמה והשמעה חוזרת מיידית.
עשר הגדרות קבועות מראש מכסות את אוצר המילים הנפוץ — ease סטנדרטי, ease-in, ease-out ו-ease-in-out, בתוספת עקומות אקספרסיביות כמו back ו-anticipate שחורגות מעבר לנקודות הסיום שלהן, ורמפות האצה והאטה בסגנון material. השתמשו בהן כפי שהן או כנקודות פתיחה לגרירה למשהו משלכם.
ניתן גם להקליד קואורדינטות נקודת בקרה מדויקות, ללחוץ על אקראיות בהשראה, ולהעתיק את ערך cubic-bezier() הפשוט או כלל CSS מוכן להדבקה. כל העורך פועל בדפדפן שלכם.
כיצד להשתמש ב-עורך עקומות האטה Cubic-Bézier
- גררו את שתי הידיות בעורך העקומה כדי לעצב את ההרכה.
- לחצו על השמעה חוזרת והשוו את האנימציה המורכת מול הרפרנס הליניארי, תוך התאמת משך הזמן במידת הצורך.
- נסו את ההגדרות הקבועות מראש — ease, back, anticipate, material ועוד — לנקודת פתיחה מהירה.
- כווננו בעדינות עם קלטי נקודת הבקרה המספריים לערכים מדויקים.
- העתיקו את ערך cubic-bezier() או את קטע ה-CSS המלא.