Animation Inspector מעניק לך שליטה מלאה על כל CSS animation ו-transition הפועלים בכל דף אינטרנט. עצור את כל ה-animations בבת אחת, האט אותם לבדיקה פריים-אחר-פריים, האץ אותם לבדיקת ביצועים, או גלול ידנית בציר הזמן — הכל מלוח צף יחיד מבלי לגעת ב-browser DevTools.
CSS animations יכולות להיות קשות במיוחד לאיתור באגים. הן קורות מהר, הן חופפות, ו-browser DevTools מכריחות אותך לחפש בסגנונות מחושבים כדי למצוא מאפייני animation. Animation Inspector פותרת זאת על ידי זיהוי אוטומטי של כל @keyframes animation וכל CSS transition בדף, רישומם עם הגדרות מלאות (duration, easing, delay, iteration count), ומתן פקדי ניגון שפועלים גלובלית או לכל animation בנפרד. בין אם אתה מאתר באגים בהאפקט hover רועד, מכוון את תזמון רצף כניסת דף, או מנסה להבין כיצד ספריית animation מורכבת פועלת מאחורי הקלעים — הכלי הזה מעמיד אותך בשליטה.
הקפא מיידית כל animation בדף בלחיצה אחת. כל ה-animations נעצרים במיקומם הנוכחי — לא מאופסים להתחלה. לחץ play כדי להמשיך מהנקודה המדויקת שבה נעצרו. חיוני לבדיקת מצבי mid-animation שאי אפשר לתפוס בעין בלתי מזוינת.
כוון את מהירות הניגון של כל ה-animations בו-זמנית. בחר מ-0.25x (רבע מהירות), 0.5x, 1x (רגיל), 2x, או 4x. הפעלה ב-0.25x הופכת גם את ה-transitions המהירים ביותר של 200ms לקלים לצפייה ולאיתור באגים.
כל CSS animation ו-transition בדף מזוהים אוטומטית ומוצגים ברשימה גלילה. כל רשומה מציגה את שם ה-animation (או מאפיין ה-transition), duration, timing function (ease, linear, cubic-bezier), delay, iteration count, ומצב הפעלה נוכחי.
גרור את מחוון ציר הזמן כדי לנוע ידנית דרך animation פריים אחר פריים. ראה בדיוק מה קורה ב-25%, 50%, או בכל נקודה במחזור ה-animation. הדף מתעדכן בזמן אמת בזמן הגרירה.
עצור, הפעל, או כוון מהירות עבור animations בודדים באופן עצמאי. בודד animation יחיד כדי לאתר בו באגים מבלי להסיח את הדעת על ידי אלמנטים נעים אחרים בדף.
לחץ על כל animation ברשימה כדי לראות את הצהרת ה-CSS המלאה שלו — הגדרת @keyframes, פירוק ה-animation shorthand, מצבי התחלה וסיום מחושבים, ולאילו אלמנטים הוא מוחל.
Animation Inspector covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewהאט animation ל-0.25x כדי לזהות בדיוק היכן מתרחשת גמגום או קיטוע. בדוק אם הבעיה נגרמת מ-layout thrashing (animation על width/height במקום transform), easing שגוי, או animations מתנגשים על אותו אלמנט.
השתמש בגלילת ציר הזמן כדי לראות כיצד עקומת cubic-bezier easing שלך נראית בפועל. השווה התנהגות ease-in מול ease-out באחוזים ספציפיים. כוון ערכים והפעל מחדש עד שהתנועה מרגישה נכונה.
בקר באתר עם animations מרשימים (דפי נחיתה, אתרי פורטפוליו) ובדוק בדיוק כיצד הם בנויים. ראה את הגדרות @keyframes, ערכי timing, ופניית האלמנטים שמאפשרת לרצפים מורכבים לפעול.
ודא שאפקטי hover, ספינרי טעינה, מסכי skeleton, ומעברי דף מתנהגים כראוי. עצור במצבי ביניים כדי לבדוק תקלות ויזואליות כמו חפיפת אלמנטים, z-index שגוי במהלך animation, או reflow של תוכן.
זהה animations שעלולים לגרום בעיות למשתמשים עם הפרעות וסטיבולריות. בדוק אם prefers-reduced-motion מכובד כראוי על ידי עצירת כל ה-animations וראיית אם הדף נשאר פונקציונלי לחלוטין.
פתח את ה-floating dock של DevSuite Pro ולחץ על אייקון Animation Inspector. הכלי סורק מיידית את הדף ומזהה את כל ה-CSS animations וה-transitions הפועלים.
לוח צף מופיע ומציג כל animation שנמצא בדף. כל רשומה מציגה את שם ה-animation, duration, easing function, ואם הוא פועל כרגע או מושהה. תג הספירה מציג את המספר הכולל של ה-animations שזוהו.
לחץ על כפתור Pause הגלובלי כדי להקפיא את כל ה-animations בו-זמנית. האלמנטים נשארים במצב mid-animation הנוכחי שלהם, מאפשרים לך לבדוק מאפייני CSS, לצלם מסך, או להשוות מיקומים.
השתמש בבורר המהירות כדי להאט animations ל-0.25x לצפייה מפורטת, או להאיץ אותם ל-4x כדי לעבור במהירות דרך animations ארוכים. שינויי מהירות מוחלים מיידית ללא הפעלה מחדש.
גרור את מחוון ציר הזמן שמאלה וימינה כדי לנוע ידנית דרך ה-animation. הדף מתעדכן בזמן אמת, מראה לך בדיוק איך כל פריים נראה. מושלם לאיתור תקלות או לאימות עקומות easing.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.