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

נשארים בכלי הפיתוח של 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. לאחר מכן תראו תצוגה חזותית של האנימציות בשימוש, ואת המאפיינים המונפשים.

המעגל הלבן נוצר ומונפש באמצעות הרכיב המדומה ::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

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

סיכום

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