איך יוצרים אנימציות CSS עם ביצועים גבוהים

Kayce Basques

Rachel Andrew

במדריך הזה נסביר איך ליצור אנימציות CSS עם ביצועים גבוהים.

במאמר למה חלק מהאנימציות איטיות? מוסבר הרקע התיאורטי להמלצות האלה.

תאימות דפדפן

כל מאפייני ה-CSS שמומלצים במדריך הזה נתמכים היטב בדפדפנים שונים.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

העברת רכיב

כדי להזיז רכיב, משתמשים בערכי מילות המפתח translate או rotation של המאפיין transform.

לדוגמה, כדי להזיז פריט לתצוגה, משתמשים ב-translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

אפשר להשתמש ב-rotate כדי לסובב רכיבים. בדוגמה הבאה, רכיב מסובב ב-360 מעלות.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

שינוי הגודל של רכיב

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

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

שינוי החשיפה של רכיב

כדי להציג או להסתיר רכיב, משתמשים ב-opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

הערה: ב-Animista אפשר למצוא דוגמאות להעתקה ולהדבקה של אנימציות שונות.

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

לפני שמשתמשים במאפיין CSS כלשהו לאנימציה (חוץ מ-transform ומ-opacity), צריך לקבוע את ההשפעה של המאפיין על צינור הרינדור. כדאי להימנע משימוש בכל מאפיין שמפעיל פריסה או צביעה, אלא אם זה הכרחי.

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

אילוץ יצירת שכבה

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

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

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

ב-CSS, אפשר להחיל את will-change על כל סלקטור:

body > .sidebar {
  will-change: transform;
}

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

כדי לכפות יצירת שכבה בדפדפן ללא תמיכה ב-will-change, אפשר להגדיר את transform: translateZ(0).

ניפוי באגים באנימציות איטיות או עם תקלות

כלי הפיתוח ל-Chrome וכלי הפיתוח ל-Firefox יכולים לעזור לכם להבין למה האנימציות איטיות או שיש בהן תקלות.

בדיקה אם אנימציה מפעילה פריסה

אנימציה שמזיזה רכיב באמצעות משהו אחר מלבד transform, סביר להניח שתהיה איטית. בדוגמה הבאה מוצגת השוואה בין אנימציה שנוצרה באמצעות transform לבין אנימציה שנוצרה באמצעות top ו-left.

מה אסור לעשות

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

מה מומלץ לעשות

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

אפשר לבדוק את זה בשתי הדוגמאות הבאות ולנתח את הביצועים באמצעות DevTools.

• לפני, עם אנימציה של top ו-left.
• אחרי כן, עם transform.

כלי פיתוח ל-Chrome

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

אם הערך של Rendering (רינדור) בכרטיסייה Summary (סיכום) שונה מאפס, יכול להיות שהאנימציה גורמת לדפדפן לבצע עבודת פריסה.

הדוגמה animation-with-top-left גורמת לעבודת רינדור.

הדוגמה animation-with-transform לא גורמת לעבודת עיבוד.

כלי הפיתוח של Firefox

ב-Firefox DevTools, הכרטיסייה Waterfall יכולה לעזור לכם להבין איפה הדפדפן מבזבז זמן.

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

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

בדיקה לאיתור פריימים שהושמטו

1. פותחים את הכרטיסייה Rendering בכלי הפיתוח ל-Chrome.
2. מסמנים את תיבת הסימון מד FPS.
3. צופים בערכים בזמן שהאנימציה פועלת.

שימו לב לתווית Frames בחלק העליון של ממשק המשתמש של מדד ה-FPS. הערכים שיוצגו יהיו כמו 50% 1 (938 m) dropped of 1878. אנימציה עם ביצועים גבוהים מקבלת אחוז גבוה, למשל 99%, כלומר מעט פריימים מושמטים והאנימציה נראית חלקה.

בדוגמה animation-with-top-left המערכת משמיטה 50% מהפריימים.

בדוגמה animation-with-transform המערכת משמיטה רק 1% מהפריימים.

בדיקה אם אנימציה מפעילה צביעה

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

כלי פיתוח ל-Chrome

1. פותחים את הכרטיסייה Rendering בכלי הפיתוח ל-Chrome.
2. בוחרים באפשרות הדגשה של צביעה.
3. מזיזים את הסמן על המסך.

בדוגמה הזו ממפות Google אפשר לראות את הרכיבים שנצבעים מחדש.

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

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

כלי הפיתוח של Firefox

1. פותחים את ההגדרות ומוסיפים לחלונית הכלים את הכפתור החלפת מצב ההבהוב של הצבע.
2. בדף שרוצים לבדוק, מעבירים את המתג למצב מופעל ומזיזים את העכבר או גוללים כדי לראות את האזורים המודגשים.

הנפשה בשלב השילוב

במידת האפשר, מגבילים את האנימציות ל-opacity ול-transform כדי שהאנימציות יישארו בשלב ההרכבה של נתיב העיבוד. משתמשים בכלי הפיתוח כדי לבדוק באיזה שלב בנתיב האנימציות משפיעות.

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

מומלץ להשתמש במאפיין will-change רק לעיתים רחוקות, ורק אם נתקלים בבעיה בביצועים.