עקומת הקלה של CSS בסגנון הקפצה
עצב פונקציית תזמון CSS cubic-bezier() מותאמת אישית על ידי גרירת שתי נקודות בקרה, תצוגה מקדימה של אותה בשידור חי מול הפניה ליניארית, ואז העתק את הערך המוכן.
תוצאה
דף זה פותח את המחולל עם x1=0.68, y1=-0.55, x2=0.265, y2=1.55 כבר נטען - עקומת חריגה שמספר ספריות מקלות תוויות easeOutBack. ה-y1 השלילי וה-y2 מעל 1 הם בדיוק הסיבה לכך שהתצוגה המקדימה של האנימציה למטה נסוגה אחורה מעבר להתחלה שלה ומעבר לסוף שלה לפני שהתיישבה; גרור או ערוך את המספרים כדי להפוך את האפקט לחזק או עדין יותר.
נהיה כנים לגבי מה זה: לעקומת () מעוקבת יחידה יש רק שתי נקודות בקרה, כך שהיא יכולה להעריך תנועת חפיפה-והתמקמות אחת, לא הקפצה פיזית אמיתית מרובת-קפיצות עם מספר קפיצות מופחתות. עבור אפקט קפיצת כדור מילולי תזדקק למספר מפתחות מפתח או קטעי steps() המשורשרים יחד - עקומה זו היא הקרובה ביותר שפונקציית תזמון מעבר רגילה יכולה להגיע בשורה אחת.
החצץ הבודד הזה הוא עדיין בדיוק מה שממשק המשתמש הקופצני ביותר רוצה: כפתור שקופץ מעט מעבר לגודל המנוחה שלו, מודאל שחורג לפני ההתיישבות, כרטיס שקופץ למקומו. העתק את הערך כפי שהוא עבור ההרגשה המבריקה הזו, או רכך את y1 לכיוון 0 ו- y2 לכיוון 1 כדי להחזיר את ה-overshoot.