יצירת אנימציות עם CSS @keyframes בדרך הנכונה

מה זה CSS animations?

CSS animations מאפשרת לנו ליצור חוויית משתמש ברמה גבוהה ומודרנית ומשפרת את המראה והתחושה הכללית של אתר האינטרנט על ידי הנפשות של HTML elements.

דרכים לכתוב CSS animations:

יש לנו שתי דרכים ליצור אנימציות עם CSS, וכל אחת מהן עוזרת לנו בדרך שלה:

• דרך ראשונה היא from & to.
• דרך שנייה היא אחוזים (%).

from & to:

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

אחוזים (%):

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

• 0% - התחלה - מצב ההתחלתי של האלמנט.
• 50% - אמצע - השלב שהאנימציה נמצאת בשלב האמצעי.
• 100% - סוף - סיום האנימציה וחזרה למצב ההתחלתי.

אנחנו החלטנו להשתמש ב50% כאל שלב אמצעי, ובסה"כ יש לנו שלושה מצבים שמוגדרים על ידי אחוזים. אתם מחליטים איך לחלק את האחוזים כדי שהאנימציה תתנהג כמו שאתם רוצים, לדוגמה, הייתם יכולים לחלק את האנימציה לחמישה שלבים: (0%, 25%, 50%, 75%, 100%).

איך כותבים CSS animations:

1. keyframes@ - כדי שנוכל לכתוב אנימציות ב-CSS, אנחנו צריכים להתחיל את הכתיבה שלנו עם keyframes@.
2. שם האנימציה - כדי שנוכל להשתמש באנימציה, אנחנו צריכים לתת לה שם. נסו לתת לה שם לפי האנימציה שהיא מבצעת.
3. אופן האנימציה - האם יש לנו שני מצבים או יותר? אם שני מצבים, נשתמש ב-from & to, אם האנימציה מבצעת יותר משני מצבים, נשתמש באחוזים, כך שכל אחוז, מסמן שלב באנימציה.

למה אנחנו משתמשים ב-transform ולא ב-margin?

אנחנו משתמשים ב-transform על פני margin מכיוון ש-transform לא משפיע על ה-layout של כל הדף, כלומר, transform לא פוגע באלמנטים אחרים. margin לעומת זאת, פוגע באלמנטים אחרים וכתוצאה מכך הדפדפן צריך לבצע re-render & re-paint על כל האלמנטים שיש בתוך ה-DOM, מה שיכול ליצור בעיות layout של האתר ואיטיות.

אנחנו המשכנו לשחק עם האנימציות שלנו והינה התוצאה הסופית :)

תוכלו לצפות בסרטון שהכנו לעוד מידע על CSS Animation: