דוגמאות לאנימציות 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, אפשר למצוא את תמונות המפתח על ידי גלילה למטה בחלונית הסגנון. שם אפשר לראות שהאנימציה נוצרה באמצעות שימוש ב-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);
  }
}

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

מעגל פועם

צפייה בעיגול פועם ב-CodePen

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

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

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

אם נשארים בכלי הפיתוח ב-Firefox, אפשר לבדוק את המעגל כדי לראות איך האנימציה עובדת. <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;
  }
}

דרך נוספת לראות אילו מאפיינים מונפשים היא לבחור בחלונית אנימציות ב-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);
  }
}

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

כדור תלת-ממדי טהור של CSS

צפייה ב-Pure CSS 3D פנורמי ב-CodePen

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

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

המישורים והחישורים האלה נמצאים בתוך wrapper <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 ומתעדים את הביצועים בזמן שהם פועלים. אחרי הטעינה הראשונית, האנימציה לא מפעילה את הפריסה 'פריסה' או 'צבע' והיא פועלת בצורה חלקה.

סיכום

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