מחולל אנימציה של CSS Keyframe
בנה אנימציות אמיתיות של @keyframes על ציר זמן מרובה רצועות - טרנספורמציה, אטימות ועצירות צבע רקע לכל רצועה - עם ראש הפעלה הניתן לגרירה המציג את מצב האנימציה באמצע האינטרפולציה המדויק.
תוצאה
כלל CSS @keyframes הוא באמת ציר זמן קטן: קבוצה של אחוזי ביקורת, כל אחת מצהירה איך נכס צריך להיראות באותו רגע בדיוק, כשהדפדפן משלב את כל מה שביניהם. בנייה אחת ביד פירושה להחזיק כמה מנקודות הבידוק האלו בראש בבת אחת על פני כמה נכסים - המחולל הזה הופך את ציר הזמן הזה למשהו שאתה באמת יכול לראות ולגרור: נתיב אופקי אחד לכל נכס, עם סמן עצירה בכל מחסום.
החלק המרכזי הוא ראש המשחקים לשפשף. גרור אותו לכל נקודה בין 0% ל-100% ותיבת התצוגה המקדימה תקפוץ למצב המשולב המדויק באותו הרגע - לא ה-keyframe הקרוב ביותר, אלא ערך אמיתי באינטרפולציה ליניארית המחושב בין שתי התחנות שמקיפות את ראש ההשמעה בכל רצועה פעילה. מאפיינים מספריים כמו מיקום, סיבוב וקנה מידה משתלבים כמספרים פשוטים; צבע רקע משלב כל ערוץ אדום, ירוק וכחול באופן עצמאי, וזה מה שגורם למסלול צבע לדהות בצורה חלקה דרך גווני ביניים במקום לדלג בין הצבעים שהגדרתם בפועל.
רצועות מרובות משתלבות אוטומטית לאנימציה אחת קוהרנטית: כל מאפיין מבוסס טרנספורמציה (הזזה, סיבוב, קנה מידה) מתמזג להצהרת טרנספורמציה אחת בכל אחוז מפתחי מפתח, בעוד האטימות וצבע הרקע נשארים בקווים משלהם, בדיוק כמו CSS אמיתי שנכתב בכתב יד. אחוזים שבהם לרצועה נתונה אין עצירה מפורשת פשוט נשארים מחוץ להצהרות של המאפיין הזה בכוונה - אינטרפולציית ה-keyframe של הדפדפן עצמו ממלאת את הפער בין העצירות שקיימות, באותה צורה שהייתה עבור כל חוק @keyframes שהקלדת ביד.
חמש הגדרות קבועות מראש - הקפצה, ניעור, דופק, דהייה והחלקה-אין - טוענים ציר זמן שלם ומוכן לטוויקט (כולל משך זמן הגיוני, פונקציית תזמון וספירה חוזרת) בלחיצה אחת. לחץ על הפעל בכל נקודה כדי לראות את אנימציית ה-CSS האמיתית פועלת על אלמנט התצוגה המקדימה, שנוצרת תוך כדי תנועה דרך גיליון סגנונות המוזרם באופן דינמי, ולאחר מכן העתק את בלוק ה-@keyframes המלא בתוספת הקיצור .animated-element { אנימציה: ... } ישר לתוך הפרויקט שלך. כמו כל כלי באתר זה, הכל פועל באופן מקומי בדפדפן ללא העלאת דבר.
הקבצים והקלטות שלך לעולם לא עוזבים את המכשיר הזה. העיבוד פועל באופן לא מקוון לחלוטין. 100% מאובטח.
פורמטים וכללים מקובלים
- ציר זמן מרובה רצועות עבור טרנספורמציה (translateX, translateY, סיבוב, קנה מידה), אטימות וצבע רקע, כל אחד עם העצירות הניתנות לגרירה משלו.
- אינטרפולציה ליניארית אמיתית - מאפיינים מספריים ו-RGB לכל ערוץ עבור צבעים - מניעה את התצוגה המקדימה של השפשוף בין כל שתי עצירות במסלול.
- כפתור הפעלה מחיל את ה-CSS @keyframes שנוצר בפועל על התצוגה המקדימה באמצעות גיליון סגנונות המוזרם באופן דינמי, בתוספת פלט מקצר @keyframes מלא שניתן להעתיק + פלט קיצור של אנימציה.
יתרונות מרכזיים
מקרי שימוש
- • גרור את ראש ההשמעה של ה-Scrub לכל נקודה בהנפשת ניתור או דופק כדי לראות את המצב המדויק של אמצע האנימציה המשולבת לפני שליחת ה-CSS.
- • שכבו רצועת translateX ורצועת אטימות יחד כדי לבנות אנימציית כניסה אמיתית של החלקה-ו-דעיכה, ולאחר מכן העתק את הקיצור המלא של @keyframes + אנימציה.
- • הוסף רצועה בצבע רקע לצד מסלול בקנה מידה כדי להנפיש את הצבע והגודל של כפתור יחדיו, צפה בערוצי ה-RGB משתלבים בשידור חי תוך כדי קרצוף.
דרג כלי זה
