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

Kayce Basques

Rachel Andrew

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

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

תאימות דפדפן

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

transform

תמיכה בדפדפנים

• 36
• 12
• 16
• 9

מקור

opacity

תמיכה בדפדפנים

• 1
• 12
• 1
• 2

מקור

will-change

תמיכה בדפדפן

• 36
• 79
• 36
• 9.1

מקור

העברת רכיב

כדי להעביר רכיב, משתמשים בערכי מילות המפתח 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 זמין במאמר כל מה שצריך לדעת על נכס will-change ב-CSS.

אם רוצים לאלץ יצירת שכבות בדפדפן שלא תומך ב-will-change (סביר להניח ש-Internet Explorer), אפשר להגדיר את 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));
  }
}

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

• לפני.
• אחרי.

כלי פיתוח ל-Chrome

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

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

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

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

Firefox DevTools

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

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

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

בדיקה אם יש מסגרות חסרות

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

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

בדוגמה animation-with-top-left, 50% מהפריימים נמחקים

בדוגמה animation-with-transform, רק 1% מהפריימים נמחקים.

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

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

כלי פיתוח ל-Chrome

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

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

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

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

Firefox DevTools

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

סיכום

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

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

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