אנימציות ומעברים ב-CSS מוסברים

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

transition - המעבר הפשוט ביותר

transition הוא הדרך הכי בסיסית ליצור אנימציה - הוא אומר לדפדפן "כשערך של תכונה CSS משתנה, אל תקפוץ אליו מיד, תעבור אליו בהדרגה". זה עובד בשילוב עם שינוי מצב, למשל hover:

.button {
  background-color: #4a90d9;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2c5f9e;
}

בלי transition, הצבע היה קופץ מיד. איתו, יש מעבר חלק של שלוש עשיריות שנייה בין הצבעים. אפשר להוסיף כמה תכונות למעבר בבת אחת, כולל transform, opacity, width, ועוד.

הפרמטרים של transition

• תכונה - מה בדיוק עובר מעבר (background-color, all להכל, וכדומה).
• משך - כמה זמן לוקח המעבר, ב-s או ms.
• easing function - עקומת התאוצה של המעבר. ease מתחיל לאט, מואץ, ומאט לסיום. linear קבוע כל הדרך. ease-in-out סימטרי בהתחלה ובסוף.
• השהיה (delay) - אופציונלי, כמה זמן לחכות לפני שהמעבר מתחיל.

.card {
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out 0.1s;
}

animation ו-keyframes - כשצריך יותר שליטה

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

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.notification-dot {
  animation: pulse 1.5s ease-in-out infinite;
}

האנימציה הזאת רצה כל הזמן, בלי צורך במעבר מצב כמו hover. infinite אומר שהיא חוזרת על עצמה לנצח, אבל אפשר גם לתת מספר חזרות ספציפי, או alternate שגורם לה לרוץ הלוך ושוב.

למה כדאי להנפיש רק transform ו-opacity

זו נקודה שרוב המתחילים לא יודעים, ומשפיעה ישירות על ביצועים. כשמנפישים תכונות כמו width, height, top או left, הדפדפן צריך לחשב מחדש את הפריסה (layout) של כל הדף בכל פריים, כי שינוי בגודל של אלמנט אחד יכול להזיז את כל האלמנטים סביבו. זה יקר חישובית, ובאנימציה מהירה זה יכול להיראות "מקוטע" (janky).

לעומת זאת, transform (כולל translate, scale, rotate) ו-opacity הן תכונות שהדפדפן יכול להנפיש כמעט לגמרי על ה-GPU, בלי לחשב מחדש פריסה בכלל. התוצאה - אנימציה חלקה בהרבה, גם על מכשירים חלשים.

/* פחות יעיל - גורם לחישוב פריסה מחדש */
.box:hover {
  left: 20px;
}

/* יעיל - רץ על ה-GPU בלי לגעת בפריסה */
.box:hover {
  transform: translateX(20px);
}

prefers-reduced-motion - לא לשכוח את זה

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

זו תוספת קטנה שהופכת את האתר שלכם לנגיש יותר, וגם מראה מקצועיות אמיתית.

מתי כדאי CSS ומתי כדאי JavaScript

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

בקורס צד לקוח יש תרגילים מעשיים על אנימציות CSS, כולל בניית אפקטים אמיתיים שנראים במוצרים מסחריים ולא רק בדוגמאות מלאכותיות.

לסיכום

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

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

הצטרפו לקהילה בדיסקורד