דוגמאות לאנימציות CSS עם ביצועים גבוהים

Rachel Andrew

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

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

אנימציה של טעינה של אשף

הצגת אנימציית הטעינה של האשף ב-CodePen

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

בדיקת האנימציה באמצעות כלי הפיתוח ל-Chrome

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

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

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

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

איך זה עובד

כדי ליצור את המשולש, משתמשים בפסאודו-אלמנט ::after כדי להוסיף תוכן שנוצר, ומשתמשים בגבולות כדי ליצור את הצורה.

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

האנימציה נוספת באמצעות שורת ה-CSS הבאה:

animation: path_triangle 10s ease-in-out infinite;

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

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

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

עיגול פועם

הצגת הדוגמה של Pulsating Circle ב-CodePen

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

בודקים את האנימציה באמצעות כלי הפיתוח ל-Firefox.

כשהאנימציה פועלת, פותחים את הכרטיסייה 'ביצועים' בכלי הפיתוח של Firefox ומתעדים כמה שניות מהאנימציה. מפסיקים את ההקלטה. בתרשים Waterfall לא אמורות להופיע רשומות של Recalculate Style. עכשיו ברור לכם שהאנימציה הזו לא גורמת לחישוב מחדש של הסגנון, ולכן לא גורמת לפעולות של פריסה וצבע.

בלי לצאת מ-Firefox DevTools, בודקים את העיגול כדי לראות איך האנימציה הזו פועלת. ה-<div> עם הכיתה pulsating-circle מסמנים את המיקום של המעגל, אבל הם לא מציירים מעגל בעצמם.

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

המעגל והאנימציות הגלויים מושגים באמצעות פסאודו-הרכיבים ::before ו-::after.

האלמנט ::before יוצר את הטבעת האטומה שמגיעה מעבר לעיגול הלבן, באמצעות אנימציה שנקראת pulse-ring, שמפעילה את transform: scale ואת opacity.

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

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

המעגל הלבן נוצר ומונפש באמצעות הרכיב המדומה ::after. האנימציה pulse-dot משתמשת ב-transform: scale כדי להגדיל ולהקטין את הנקודה במהלך האנימציה.

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

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

Pure CSS 3D Sphere

הצגת כדור תלת-ממדי ב-CSS טהור ב-CodePen

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

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

המישורים והסרגלים האלה נמצאים בתוך עטיפה <div>, והיא זו שמסתובבת באמצעות transform: rotate3d.

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

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

.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

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

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

סיכום

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