בפוסט הזה תוכלו לגלות איך נוצרו כמה אנימציות פופולריות שנמצאו ב-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);
}
}
בכל אחד מהחלקים הנעים השונים של האנימציה הזו נעשה שימוש בשיטות דומות. התוצאה היא אנימציה מורכבת שפועלת בצורה חלקה.
עיגול פועם
סוג האנימציה הזה משמש לפעמים כדי למשוך תשומת לב למשהו בדף. כדי להבין את האנימציה, אפשר להשתמש בכלי הפיתוח של Firefox.
בדיקת האנימציה באמצעות Firefox DevTools
כשהאנימציה פועלת, פותחים את הכרטיסייה 'ביצועים' בכלי הפיתוח של Firefox ומתעדים כמה שניות מהאנימציה. מפסיקים את ההקלטה. בתרשים Waterfall לא אמורות להופיע רשומות של 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;
}
}
דרך נוספת לראות אילו מאפיינים מופעלת בהם אנימציה היא לבחור בחלונית 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 ומתעדים את הביצועים בזמן שהיא פועלת. אחרי הטעינה הראשונית, האנימציה לא מפעילה 'פריסה' או 'צבע', והיא פועלת בצורה חלקה.
סיכום
מהדוגמאות האלה אפשר לראות איך אנימציה של כמה נכסים באמצעות שיטות עם ביצועים טובים יכולה ליצור אנימציות מגניבות מאוד. כשמשתמשים כברירת מחדל בשיטות בעלות הביצועים הטובים שמתוארות במדריך ליצירת אנימציות, אפשר להשקיע את הזמן ביצירת האפקט הרצוי בלי לדאוג יותר מדי לגבי האטה של הדף.