חזרה למאמרים

Web Design

אנימציות וקטוריות בלי JavaScript: 5 צעדים ל-CSS Path Morphing מהיר

מדריך מעשי ליצירת מיקרו-אינטראקציות וקטוריות מרהיבות ב-CSS בלבד באמצעות תכונת path(). חסכו עשרות קילובייטים של ספריות Lottie והאיצו את האתר.

3 דקות קריאהCSS · SVG · Micro-interactions · Performance · Web Design

TL;DR

אין יותר צורך ב-JavaScript או בספריות Lottie כבדות כדי ליצור מיקרו-אינטראקציות וקטוריות חלקות. בעזרת תכונת d: path() ב-CSS בלבד, אפשר להנפיש מסלולי SVG ב-0 מילישניות של עיכוב עבודת מעבד.

בשנה האחרונה בניתי שדרוג לאתר של סטודיו לעיצוב פנים מאלנבי. המעצב רצה כפתור הופך-אייקון שמשנה צורה מבלון למגן בעת רפרוף (Hover). הפתרון הקלאסי שלו היה להטעין קובץ Lottie במשקל 120KB יחד עם ספריה של 60KB. הטענה כזו מאיטה את האתר ומחסלת את מדדי ה-Core Web Vitals.

אמרתי לו עצור.

אפשר לעשות את זה ב-CSS טהור.

הגדרה · SVG Path Morphing

שינוי צורה של וקטור (Morphing) הוא תהליך שבו מסלול SVG אחד משנה את נקודות העיגון והקואורדינטות שלו כדי להפוך למסלול אחר בצורה רציפה.

1. שומרים על מספר נקודות זהה באיור

החוק הפיזיקלי היחיד של CSS Morphing: שני המסלולים חייבים להכיל בדיוק את אותו מספר נקודות (Nodes) ואותה סדרת פקודות ב-Path.

אם המסלול הראשון מורכב מ-4 נקודות סגורות והמסלול השני מורכב מ-4 נקודות סגורות, הדפדפן יודע לחשב את המעבר לבד. אם תוסיפו נקודה חמישית בצורה השנייה, ההנפשה תישבר ותקפוץ.

ב-Figma או ב-Illustrator:

  • ציירו את הצורה הראשונה.
  • שכפלו אותה ושנו את מיקום הנקודות הקיימות כדי ליצור את הצורה השנייה.
  • אל תוסיפו או תמחקו נקודות באמצע.

0ms

זמן עיכוב ב-Main Thread של הדפדפן בעת הנפשת SVG דרך CSS

2. מנקים את קוד ה-SVG מפרמטרים מיותרים

דפדפנים שונאים קוד מלוכלך. לפני שמעתיקים את ה-Path ל-CSS, צריך לסנן זבל שמייצרות תוכנות עיצוב.

השתמשו בכלי כמו SVGO כדי להוריד תגיות מיותרות, מזהים אוטומטיים ורווחים מיותרים. אתם צריכים רק את המחרוזת שיושבת בתוך פרמטר ה-d.

משאירים רק את הקואורדינטות הנקיות: d="M10 10 H 90 V 90 H 10 Z"

3. מגדירים את ה-Path ישירות ב-CSS

בעבר, כדי לשנות Path הייתם חייבים קוד JS שישנה את התכונה ב-DOM. ב-2026, תכונת d נתמכת מלא ב-CSS בכל הדפדפנים המובילים.

היבטשיטה ישנה (Lottie / JS)שיטה חדשה (CSS Path)
משקל קוד60KB - 200KB0KB (חלק מ-CSS קיים)
מעבדמופעל ב-JavaScript Main Threadמורנדר ישירות בדפדפן
תחזוקהמצריך ספריה חיצוניתקוד CSS טבעי וקריא

כך זה נראה בקוד:

.icon-path {
  d: path("M10 10 L50 10 L50 50 L10 50 Z");
  transition: d 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover .icon-path {
  d: path("M25 5 L45 25 L25 45 L5 25 Z");
}

זה הכל. שום סקריפט. הדפדפן מחשב את המעברים הווקטוריים בעצמו.

מנועי חיפוש בודקים ביצועי דף בזמן אמת. מעבר מאינטראקציות מבוססות סקריפטים ל-CSS בלבד מעלה מיידית את ציון ה-Performance במבחני Lighthouse.

4. מגנים על הממשק בעזרת @supports

למרות שהתמיכה ב-CSS Path Animation רחבה ב-Chrome, Safari ו-Edge, תמיד יש משתמשים עם דפדפנים ישנים.

כדי למנוע תקלות חזותיות, עוטפים את ה-Morphing בבדיקת תכונה קצרה:

@supports (d: path("M0 0 H10 Z")) {
  .icon-path:hover {
    d: path("M25 5 L45 25 L25 45 L5 25 Z");
  }
}

אם הדפדפן הישן לא תומך, השינוי לא יתרחש והצורה תישאר יציבה. יציבות עדיפה על הנפשה שבורה.

5. מחברים מיקרו-אינטראקציות לחיווי משתמש

מיקרו-אינטראקציות לא מיועדות רק לקישוט. הן מייצרות תקשורת עם המשתמש.

משתמשים בזה בנקודות מפתח בטפסים ובממשק:

  • כפתור "שלח" שהופך ל-V של אישור לאחר לחיצה.
  • אייקון חיפוש שהופך לחץ חזרה.
  • תפריט המבורגר שהופך לאיקס סגירה.

💡

מיקרו-אינטראקציות מוצלחות הן אלה שהמשתמש מרגיש, לא אלה שהוא מחכה שהן יסתיימו. שמרו על זמן מעבר של 200ms עד 350ms.

סיכום

אתרים מהירים ב-2026 מבוססים על קוד רזה. אל תעמיסו ספריות כבדות בשביל הנפשה של כמה וקטורים בודדים. עברו ל-CSS path morphing ותקבלו אתר מהיר, נקי ומדויק.

שאלות נפוצות

כל מה שעוד רצית לדעת

האם כל צורת SVG יכולה להפוך לצורה אחרת ב-CSS?
כן, בתנאי שלשתי הצורות יש בדיוק את אותו מספר נקודות עוגן (Nodes) ואותה סדרת פקודות במסלול ה-d.
מה קורה אם הדפדפן של המשתמש לא תומך ב-CSS path morphing?
בשימוש בשיטת @supports, דפדפנים שלא תומכים פשוט יציגו את הצורה המקורית ללא מעבר מעוצב, בלי לשבור את הממשק.
למה להשתמש ב-CSS במקום ספריות Lottie או GSAP?
Lottie ו-GSAP מוסיפות משקל קוד של 60KB עד 200KB ומריצות חישובים ב-JavaScript. CSS פועל ברמת הדפדפן, לא מעמיס על המעבד ומשפר את מדדי ה-Core Web Vitals.
AB

כתב

אדיר בן יעקב · Adir Ben Yaakov

מקים JustBetterSite, סוכנות בניית אתרים ושיווק דיגיטלי בתל אביב. מתמחה ב-GEO (Generative Engine Optimization) — בנייה של אתרים שמופיעים בתשובות של ChatGPT, Claude, Perplexity ו-Gemini, לא רק בגוגל.

עוד עליי →

להמשך הקריאה

מאמרים קשורים

Web Design

איך לעצב פינות Apple חלקות ב-CSS בלבד עם corner-shape

מדריך מעשי לשימוש בתכונת CSS corner-shape ליצירת Squircles מושלמים. למדו איך להשיג את המראה היוקרתי של אפל בלי מסכות SVG כבדות או קוד מסורבל.

המשך

Web Design

5 דרכים לעצב חיתוכים ואפקטים מורכבים ב-CSS בלי להכביד על האתר

מדריך פרקטי לשימוש ב-CSS mask ו-clip-path. כך תייצרו אלמנטים ויזואליים מרשימים וחיתוכים יצירתיים בלי קובצי תמונה כבדים ובלי לפגוע במהירות הטעינה.

המשך

Web Design

קרוסלות ב-CSS טבעי בלבד: נפרדים מ-JavaScript עם scroll-marker

נפרדים מספריות JavaScript כבדות לקרוסלות. מדריך פרקטי לבניית גלריות מוצרים קלות, נגישות ומהירות ב-CSS טבעי בלבד עם תכונת scroll-marker.

המשך