מה זה CSS animations?
CSS animations מאפשרת לנו ליצור חוויית משתמש ברמה גבוהה ומודרנית ומשפרת את המראה והתחושה הכללית של אתר האינטרנט על ידי הנפשות של HTML elements.
אנימציות עם CSS יכולות להיות תוספת אדירה לאתר שלכם אם תבנו אותן נכון. אם תבנו אותן לא נכון, אתם תאטו את האתר שלכם ותגרמו לבעיות ביצועים קשות. במאמר הזה אנחנו נלמד איך לבנות אנימציות בצורה הנכונה.
CSS animations מאפשרת לנו ליצור חוויית משתמש ברמה גבוהה ומודרנית ומשפרת את המראה והתחושה הכללית של אתר האינטרנט על ידי הנפשות של HTML elements.
יש לנו שתי דרכים ליצור אנימציות עם CSS, וכל אחת מהן עוזרת לנו בדרך שלה:
נשתמש בטכניקה הזו כאשר יש לנו שני מצבים (התחלה וסוף), מימין => לשמאל, מלמעלה => למטה וכדומה.
נשתמש בטכניקה הזו כאשר יש לנו יותר משני מצבים, למשל: עמידה => קפיצה => חזרה לעמידה. בעזרת טכניקה זו, אנחנו יכולים ליצור לאנימציה מספר שלבים:
אנחנו החלטנו להשתמש ב50% כאל שלב אמצעי, ובסה"כ יש לנו שלושה מצבים שמוגדרים על ידי אחוזים. אתם מחליטים איך לחלק את האחוזים כדי שהאנימציה תתנהג כמו שאתם רוצים, לדוגמה, הייתם יכולים לחלק את האנימציה לחמישה שלבים: (0%, 25%, 50%, 75%, 100%).
keyframes@ - כדי שנוכל לכתוב אנימציות ב-CSS, אנחנו צריכים להתחיל את הכתיבה שלנו עם keyframes@.
שם האנימציה - כדי שנוכל להשתמש באנימציה, אנחנו צריכים לתת לה שם. נסו לתת לה שם לפי האנימציה שהיא מבצעת.
אופן האנימציה - האם יש לנו שני מצבים או יותר? אם שני מצבים, נשתמש ב-from & to, אם האנימציה מבצעת יותר משני מצבים, נשתמש באחוזים, כך שכל אחוז, מסמן שלב באנימציה.
@keyframes move {
from {
transform: translateX(-50px);
}
to {
transform: translateX(110vw);
}
}
בתמונה למעלה, אנחנו רואים כתיבה של אנימציה ממצב אחד למצב שני. אנחנו מזיזים את האובייקט מימין לשמאל. כמו ששמתם לב, השתמשנו ב-translateX כדי להזיז את האובייקט לאורך הציר האופקי. אתם אולי שואלים את עצמכם, למה לא margin? תכף נגיע לשם.
.roller {
/** Long Variation */
animation-name: move;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: reverse;
/** Short Variation */
width: 240px;
margin-top: 50px;
animation: move 15s linear 0s infinite reverse;
}
בתמונה למעלה, תוכלו לראות שאפשר להשתמש בגרסה המקוצרת או הארוכה כדי ליישם CSS animations. באותה הדרך תוכלו גם ליישם את האנימציה שלכם עם האחוזים.
@keyframes jump {
0% {
top: -40px;
}
50% {
top: -60px;
}
100% {
top: -40px;
}
}
בתמונה למעלה, אנחנו יכולים להבין שהאנימציה מבצעת שלושה מצבים (התחלה, אמצע, סוף), ולכן אחוזים בהחלט הבחירה הנכונה.
.mario {
animation: jump 2s linear infinite 1s normal;
}
אנחנו יכולים ליישם את האנימציה בדיוק כמו שהראנו בדוגמה למעלה. בואו נראה מה אנחנו מקבלים בתוצאה הסופית.
אנחנו רואים שמריו מבצע שלושה מצבים (מצב התחלתי, עלייה וירידה כלומר חזרה למצב ההתחלתי), שלושה מצבים, שלושה אחוזים.
אנחנו משתמשים ב-transform על פני margin מכיוון ש-transform לא משפיע על ה-layout של כל הדף, כלומר, transform לא פוגע באלמנטים אחרים. margin לעומת זאת, פוגע באלמנטים אחרים וכתוצאה מכך הדפדפן צריך לבצע re-render & re-paint על כל האלמנטים שיש בתוך ה-DOM, מה שיכול ליצור בעיות layout של האתר ואיטיות.
אנחנו המשכנו לשחק עם האנימציות שלנו והינה התוצאה הסופית :)