מחולל אנימציית CSS Keyframe

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

לב העניין הוא ראש ההשמעה הנגרר. גררו אותו לכל נקודה בין 0% ל-100% ותיבת התצוגה המקדימה תקפוץ למצב המשולב המדויק באותו הרגע — לא למסגרת המפתח הקרובה ביותר, אלא לערך אמיתי שעבר אינטרפולציה לינארית שחושב בין שתי התחנות שמקיפות את ראש ההשמעה בכל מסלול פעיל. מאפיינים מספריים כמו מיקום, סיבוב וקנה מידה עוברים אינטרפולציה כמספרים פשוטים; background-color עובר אינטרפולציה עצמאית לערוץ אדום, ירוק וכחול, וזה מה שגורם למסלול צבע לדעוך בצורה חלקה דרך גווני ביניים במקום לקפוץ בין הצבעים שהגדרתם בפועל.

מספר מסלולים משתלבים אוטומטית לכדי הנפשה קוהרנטית אחת: כל מאפיין מבוסס transform (הזזה, סיבוב, קנה מידה) מתמזג להצהרת transform אחת בכל אחוז מפתח, בעוד opacity ו-background-color נשארים בשורות נפרדות, בדיוק כפי ש-CSS אמיתי בכתב יד היה נראה. אחוזים שבהם למסלול נתון אין תחנה מפורשת פשוט נותרים מחוץ להצהרות של אותו מאפיין בכוונה תחילה — אינטרפולציית מפתח-מסגרות של הדפדפן ממלאת את הפער בין התחנות הקיימות, באותו האופן שבו היא פועלת עבור כל חוק @keyframes שתקלידו ידנית.

חמש הגדרות מוכנות מראש — הקפצה, רעיד, הלמה, דעיכה והחלקה-פנימה — טוענות ציר זמן שלם מוכן לשינוי (כולל משך, פונקציית תזמון ומספר חזרות) בלחיצה אחת. לחצו על Play בכל נקודה כדי לראות את ההנפשה האמיתית ב-CSS על אלמנט התצוגה המקדימה, נוצרת תוך כדי ריצה דרך גיליון סגנון מוזרק דינמית, ואז העתיקו את בלוק ה-@keyframes המלא בתוספת קיצור ה-.animated-element { animation: ... } ישירות לפרויקט שלכם. כמו כל כלי באתר הזה, הכול רץ מקומית בדפדפן בלי שדבר מועלה אי-פעם.