המספרים האמיתיים שמאחורי CSS קלות-in-out
עצב פונקציית תזמון CSS cubic-bezier() מותאמת אישית על ידי גרירת שתי נקודות בקרה, תצוגה מקדימה של אותה בשידור חי מול הפניה ליניארית, ואז העתק את הערך המוכן.
תוצאה
דף זה פותח את מחולל ה-Cubic-Bezier עם x1=0.42, y1=0, x2=0.58, y2=1 כבר נטען - נקודות הבקרה המדויקות שאליהן מתרחבת מילת המפתח הקלה ב-CSS. גרור או נקודת אחיזה, או ערוך את המספרים ישירות, והעקומה, התצוגה המקדימה של האנימציה והמחרוזת הניתנת להעתקה כולם מתעדכנים באופן מיידי.
ease-in-out היא אחת מחמש מילות המפתח המובנות בתזמון CSS, והיא פופולרית בדיוק בגלל שהעקומה הזו מואצת בעדינות מההתחלה, מחזיקה קצב די אחיד באמצע, ומקלה בחזרה לפני הסוף - צורה שנקראת כטבעית לרוב תנועת ממשק המשתמש. ראייתו כנקודות בקרה מפורשות במקום שם מילת מפתח מבהירה מדוע: y1 יושב ליד 0 ו-y2 יושב ליד 1, שניהם קרובים ל-x התואם שלהם, כך שאין חריגה משני הכיוונים.
השתמש בארבעת המספרים האלה כנקודת התחלה ולא במילת המפתח עצמה בכל פעם שאתה צריך לזרז מעט את התחושה - משוך את x1 כלפי מטה כדי להתחיל יותר קלה, או לחץ על y2 מעל 1 כדי להפוך את אותה צורה לחריגה עדינה. כל שינוי מעדכן את התצוגה המקדימה ואת שורת ההעתקה cubic-bezier() באופן מיידי.