מחולל CSS Cubic-Bezier

מהו הכלי הזה?

cubic-bezier() היא פונקציית תזמון ב-CSS השולטת באופן שבו ערך מונפש או במעבר מאיץ ומאט לאורך זמן, במקום לנוע בקצב קבוע. היא מוגדרת על ידי שתי נקודות בקרה — (x1, y1) ו-(x2, y2) — המעקמות עקומה בין נקודת התחלה קבועה (0,0) לנקודת סיום קבועה (1,1). ערכי x חייבים להישאר בין 0 ל-1, אך ערכי y יכולים לחרוג מהטווח הזה כדי ליצור אפקטים של חריגה (overshoot) או קפיצה.

כשכותבים ידנית, כיוונון ארבעה מספרים עשרוניים כדי להשיג תחושה שאינה חדה מדי ואינה רכה מדי דורש הרבה ניסוי וטעייה. כלי זה מחליף את הניחוש הזה במניפולציה ישירה: גררו מחוון, צפו בעקומה מתעקמת ובכדור התצוגה המקדימה נע בהתאם, והעתיקו את הקוד ברגע שהתנועה מרגישה נכונה.

מקור: CSS Easing Functions Level 1, W3C — המפרט המגדיר את cubic-bezier() וחמש מילות המפתח בעלות השם שעליהן מבוססות ההגדרות המוכנות מראש של כלי זה.

למה להשתמש בו?

• גרף SVG חי מציג בדיוק כיצד העקומה שלכם מתעקמת בין נקודות ההתחלה והסיום הקבועות, כאשר שתי נקודות הבקרה וידיות האחיזה שלהן מצוירות לשם בהירות.
• כפתור ההפעלה מנפיש אלמנט תצוגה מקדימה לאורך מסלול תוך שימוש בעקומה המדויקת שלכם, כך שתוכלו להרגיש את התנועה ולא רק לראות גרף סטטי.
• הגדרות מוכנות מראש בלחיצה אחת עבור חמש פונקציות התזמון הסטנדרטיות בעלות השם — ease‏, ease-in‏, ease-out‏, ease-in-out ו-linear — כפי שמתועד במפרט CSS Easing Functions.
• ערכי Y יכולים לרדת מתחת ל-0 או לעלות מעל 1, מה שמאפשר לבנות אפקטי חריגה/קפיצה שמילות המפתח בעלות השם אינן יכולות להפיק.
• מפיק קוד CSS מוכן להדבקה בשם transition-timing-function — אותו ערך עובד גם עבור animation-timing-function.
• פועל כולו בדפדפן שלכם — שום דבר שאתם מגדירים לא מועלה לשום מקום. חינם, ללא הרשמה.

איך להשתמש

1. גררו את המחוונים x1/y1 כדי לקבוע את נקודת הבקרה הראשונה, המעצבת כיצד האנימציה מתחילה.
2. גררו את המחוונים x2/y2 כדי לקבוע את נקודת הבקרה השנייה, המעצבת כיצד האנימציה מסתיימת.
3. עקבו אחר העקומה השחורה בגרף — עקומה הבולטת מעל האלכסון בתחילת הדרך משמעה שהתנועה מתחילה מהר, ועקומה שנשארת מתחתיו משמעה שהתנועה מתחילה לאט.
4. לחצו על 'הפעל' כדי לראות אלמנט תצוגה מקדימה נע לאורך המסלול תוך שימוש בעקומה שלכם כ-transition-timing-function.
5. נסו הגדרה מוכנה מראש (ease‏, ease-in‏, ease-out‏, ease-in-out‏, linear) כנקודת התחלה, ואז כווננו את המחוונים משם.
6. העתיקו את קוד ה-CSS שנוצר והדביקו אותו בכלל transition או animation.

דוגמה

קלט

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

פלט

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

זוהי מילת המפתח הסטנדרטית ease של CSS כתובה כנקודות בקרה מפורשות — התחלה מהירה, האצה חדה, ולאחר מכן האטה הדרגתית לקראת הסוף.

מדוע ערכי y יכולים לחרוג מ-0–1

בניגוד לציר ה-x, המייצג זמן וחייב לנוע מ-0 עד 1, ציר ה-y מייצג את התקדמות הערך המונפש ואין לו הגבלה כזו. הגדרת y1 מתחת ל-0 או y2 מעל 1 גורמת לעקומה לצלול מתחת לערך ההתחלה או לחרוג מעבר לערך הסיום לפני ההתייצבות — הבסיס לאפקטי חריגה וציפייה המשמשים בלחיצות כפתורים, הופעת חלונות מודאליים ומיקרו-אינטראקציות משעשעות בממשק. אף אחת מחמש מילות המפתח בעלות השם (ease‏, ease-in‏, ease-out‏, ease-in-out‏, linear) אינה יכולה להפיק זאת; לשם כך דרושה cubic-bezier() מותאמת אישית.

transition-timing-function לעומת animation-timing-function

הערך cubic-bezier() שכלי זה מייצר פועל באופן זהה בשני המאפיינים. השתמשו ב-transition-timing-function כאשר התנועה מופעלת על ידי שינוי מצב (כמו ריחוף עכבר או החלפת מחלקה), וב-animation-timing-function בתוך כלל אנימציה המונע על ידי @keyframes כאשר אתם זקוקים לאותה תחושת תזמון המיושמת אוטומטית או בלולאה.

דפוסי תזמון נפוצים

• משוב ממשק מהיר (כפתורים, מתגים): שמרו על נקודות הבקרה קרובות לאלכסון עם הטיה קלה של ease-out, למשל cubic-bezier(0.4, 0, 0.2, 1).
• העקומה הסטנדרטית של Material Design: cubic-bezier(0.4, 0, 0.2, 1) — התחלה מהירה, סיום עדין, בשימוש נרחב במעברי פאנלים וכרטיסים.
• קפיצה/חריגה: הזיזו את y2 מעל 1, למשל cubic-bezier(0.34, 1.56, 0.64, 1), לתחושת הופעה משעשעת.
• ציפייה לפני תנועה: הזיזו את y1 מתחת ל-0 כך שהאלמנט יימשך מעט לאחור לפני שינוע קדימה.
• ease-in-out חלק לאנימציות בלולאה: שמרו על העקומה קרובה לסימטרית סביב המרכז.

שילוב עם כלי CSS נוספים

עקומת תזמון לעיתים רחוקות עומדת בפני עצמה — היא בדרך כלל מיושמת על אלמנט שזקוק גם לצללים, פינות מעוגלות או גרדיאנטים מוגדרים. צרו את העיצוב החזותי עם כלי ה-CSS האחרים שלמטה, ואז הוסיפו את פונקציית התזמון מכלי זה לאותו כלל או להצהרת transition/animation.

→ Box Shadow Generator · Border Radius Generator

שאלות נפוצות