שפת ה-HTML מספקת את המבנה של דף האינטרנט, ו-CSS מספק את העיצוב והעיצוב של יישום זה. שילוב זה גם מאפשר לך להוסיף אנימציה, שכן האלמנטים המונפשים נראים אטרקטיביים יותר בהשוואה לאלמנטים סטטיים. זה גם מאפשר לאלמנט לשנות את הסגנון שלו בהדרגה.
מאמר זה ינחה כיצד נוכל ליישם אנימציה על האלמנטים. אז, בואו נתחיל!
מהן מסגרות מפתח של אנימציה של CSS?
כדי לבצע את האנימציה, עלינו לאגד את האנימציה לאלמנט ה-HTML. למטרה זו, השתמש במילת המפתח ' @keyframes ' ואחריו שם האנימציה. רכיב זה מציין את ההתחלה והסוף של האנימציה.
כיצד להגדיר מסגרות מפתח של אנימציה של CSS?
כדי להגדיר פריימים מפתח אנימציה ב-CSS, נעבור על שתי דוגמאות.
דוגמה 1
להגדרת מסגרות מפתח של אנימציה ב-CSS, בצע את השלבים הבאים:
-
- הוסף עם שם הכיתה ' ראשי-div '.
- בתוך ה-div, הוסף div נוסף עם שם הכיתה ' img-peng '.
- בתוך img-peng div זה, הוסף
כדי למקם את התמונה. לתג זה יש שלוש תכונות, ' src ' תכונה לספק את נתיב התמונה, ' הכל ' הוא הטקסט החלופי שמתווסף אם התמונה לא מוצגת, וה' רוֹחַב ' תכונה לספק את רוחב התמונה.
HTML
< div מעמד = 'דייוו הראשי' >
< div מעמד = 'img-peng' >
< img src = 'images/penguin.png' הכל = 'פינגווין' רוֹחַב = '100' >
div >
div >
.main-div {
CSS
רוֹחַב: 90 % ;
גובה: 90 פיקסלים;
צבע רקע: rgb ( 67 , 66 , 87 ) ;
שוליים: 20px אוטומטי;
ריפוד: 10px;
}
ב-CSS, ה' .main-div ' נוסף כדי לגשת למחלקה div. המאפיינים שהוחלו עליו מוסברים להלן:-
- ' רוֹחַב ערך המאפיין מגדיר את רוחב ה-div.
- ' גוֹבַה מאפיין משמש כדי להגדיר את גובה ה-div.
- ' צבע רקע ' המאפיין מחיל צבע על הרקע של האלמנט.
- ' שולים ' מוגדר כ' מכונית 20 פיקסלים ”, המציין את הרווח מלמעלה ומלמטה, ואוטו פירושו רווח שווה משמאל ומימין.
- ' ריפוד ערך המאפיין מוקצה כ-10px, אשר מחיל שטח סביב תוכן האלמנט.
שיעור img-peng בסגנון
.img-peng {
רוחב: 50 פיקסלים;
גובה: 100 פיקסלים;
עמדה: קרוב משפחה;
אנימציה: שייק;
משך הנפשה: 2 שניות;
אנימציה-תזמון-פונקציית: 2s;
אנימציה-איטרציה-ספירת: אינסופי;
}
ה ' .img-peng ' משמש לגישה למחלקה div, המוזכרת בקובץ ה-HTML שלמעלה. רכיב div זה מעוצב עם מאפיינים הנדונים להלן:-
- ' רוֹחַב ערך המאפיין משמש כדי להגדיר את רוחב האלמנט.
- ' גוֹבַה ערך המאפיין משמש להגדרת גובה האלמנט.
- ' עמדה ' למאפיין מוקצה הערך ' קרוב משפחה ', כלומר הוא ימוקם ביחס למיקומו הרגיל.
- ' אנימציה השם ניתן כ' לְנַעֵר '. עם זאת, אתה יכול לתת שם לאנימציה בהתאם לדרישה.
- ' משך אנימציה ' מייצג את משך ההנפשה, שהוא 2 שניות.
- ' אנימציה-תזמון-פונקציה ” מוקצה ערך של 2s כלומר תוך 2 שניות, ההנפשה הושלמה.
- ' אנימציה-איטרציות-ספירת ' מוגדר כאינסופי, מה שאומר שהאנימציה הזו תתרחש בזמן אינסופי.
הגדר @keyframes עם מילות מפתח אל וממנה
@ מסגרות מפתח רועדות {
מ {
למעלה: 50px;
}
ל {
margin-bottom: 200px;
}
}
התיאור של מסגרות מפתח האנימציה המוגדרות לתמונה מופיע להלן:-
- ' @keyframes רועד ' מתייחס לשם האנימציה שייק ואחריו מילת המפתח @keyframes. במסגרת כלל זה, ההתנהגות של האנימציה מוגדרת.
- בתוך הסוגריים המתולתלים שלו, ' מ ' ו' ל ' מילות מפתח מציינות מרווחים שונים כדי להגדיר את התנהגות האנימציה.
- ה ' חלק עליון ' למאפיין מוקצה הערך של 50 פיקסלים, כלומר האנימציה מתחילה מ-50 פיקסלים מהחלק העליון של המסך וממשיכה ל-200 פיקסלים בחלק התחתון.
כתוצאה מכך, תראה את הפלט הבא:
כעת, תן לאנימציה להתנהג אחרת במרווחים שונים. לשם כך, השתמש באחוזי האנימציה ב-@keyframes.ציין @keyframes עם אחוזים
@ מסגרות מפתח רועדות {
0 % {
שמאלה: -50 פיקסלים ;
}
25 % {
שמאל: 50px;
}
חמישים % {
שמאלה: -25 פיקסלים ;
}
75 % {
שמאל: 25px;
}
100 % {
שמאל: 10px;
}
}
אז, התיאור של קטע הקוד לעיל מוזכר כאן:-
- ערכי האחוזים 0%, 25%, 50%, 75% ו-100% מייצגים את האנימציה במרווחים שונים.
- יתרה מכך, ב-0%, הרווח בצד שמאל של התמונה יהיה ' -50 פיקסלים '. ב-25%, הרווח משמאל יהיה ' 50 פיקסלים '. ב-50%, הרווח משמאל יהיה ' -25 פיקסלים '. ב-75%, הרווח השמאלי יהיה ' 25 פיקסלים ', וכשהאנימציה תסתיים (100%), החלל השמאלי יהיה ' 10 פיקסלים '.
הקוד לעיל מציג את האנימציה הבאה:
בואו ניקח דוגמה נוספת כדי לראות כיצד אנו יכולים להגדיר אנימציות לתמונות.דוגמה 2
ב-HTML, הוסף
עם שם המחלקה ' עמוד ראשי '. בתוך אלמנטזה, מקם עוד שתי תגיות div עם מחלקות ' ענן 1 ' ו' ענן2 ', בהתאמה.HTML
< div מעמד = 'עמוד ראשי' >
< div מעמד = 'ענן 1' > div >
< div מעמד = 'ענן 2' > div >
div >
גוּף {
CSS
שולים: 0 ;
ריפוד: 0 ;
}
ב-CSS, נקצה את מאפייני ה-CSS הבאים לאלמנט הגוף:-
- ' שולים ' מאפיין כ-0 אינו מציין רווח סביב האלמנט.
- ' ריפוד ' מאפיין עם הערך 0 אינו מציין רווח סביב תוכן האלמנט.
סגנון דף ראשי div
.עמוד ראשי {
רקע-תמונה: url ( / תמונות / wolf-night.png ) ;
רקע-חזרה: אין-חזרה;
רקע-גודל: כריכה;
גובה: 100Vh;
עמדה: קרוב משפחה;
overflow: מוסתר;
}
כאן:-
- ' .עמוד ראשי ' משמש לגישה למחלקה div.
- ' תמונת רקע ' למאפיין מוקצה הערך ' url(/images/wolf-night.png) ” כאשר images היא התיקיה המכילה את התמונה wolf-night.png.
- ' רקע-חזרה ' למאפיין מוקצה הערך ' ללא חזרה , כלומר התמונה תוצג פעם אחת.
- ' גודל רקע ' מוגדר כ' כיסוי ' כדי למלא את כל רכיב ה-div.
- ' גוֹבַה הוא 100Vh שהם 100% מגובה נקודת התצוגה.
- ' עמדה ” בתור יחסי מגדיר את מיקום התמונה ביחס למיקומה הנוכחי.
- ' הצפה ' הערך של המאפיין מוגדר כמוסתר כדי להסתיר את החלק בתמונה שגדול מכדי להתאים למיכל.
סגנון ענן1 class
.cloud1 {
רקע-תמונה: url ( / תמונות / cloud.png ) ;
רקע-גודל: מכיל;
רקע-חזרה: אין-חזרה;
מיקום: מוחלט;
למעלה: 100px;
רוחב: 500 פיקסלים;
גובה: 300 פיקסלים;
אנימציה: cloudanimation1;
משך אנימציה: שנות ה-70;
אנימציה-איטרציה-ספירת: אינסופי;
}
המחלקה div cloud1 מוחלת עם המאפיינים המפורטים הבאים:-
- ' .cloud1 ' משמש לגישה ל-div class cloud1.
- ' תמונת רקע ' מאפיין מוגדר כ-url(/images/cloud.png), כאשר תמונות הן התיקיה המכילה את התמונה cloud.png.
- ' גודל רקע 'עם הערך' לְהַכִיל ” מבטיח את הנראות של התמונה.
- ' רקע-חזרה ' מאפיין עם הערך מוגדר כ' ללא חזרה ' מציג את התמונה כלא חוזרת.
- ' עמדה ' כמו מוחלט ממקם את התמונה ביחס לאלמנט ההורה שלה.
- ' חלק עליון ' מאפיין מגדיר את התמונה ב-100 פיקסלים מלמעלה.
- ' רוֹחַב 'מאפיין משמש להגדרת רוחב רכיב ה-div ל-500px.
- ' גוֹבַה 'מאפיין משמש להגדרת גובה רכיב ה-div ל-300px.
- ' אנימציה ' מוקצה השם cloudanimation1.
- ' משך אנימציה ” מייצג את משך ההנפשה, שהוא 70 שניות.
- ' אנימציה-איטרציות-ספירת ” מוקצה לערך אינסופי, אשר יחזור על האנימציה אינסוף פעמים.
עד כה, החלנו את מאפייני ה-CSS על הדף הראשי של class div ועל cloud1. כעת, בסעיף הבא, נעצב את מחלקת ה-div הבאה בשם cloud2.
סגנון ענן2 class
.cloud2 {
רקע-תמונה: url ( / תמונות / cloud.png ) ;
רקע-גודל: מכיל;
רקע-חזרה: אין-חזרה;
מיקום: מוחלט;
למעלה: 50px;
רוחב: 200 פיקסלים;
גובה: 300 פיקסלים;
אנימציה: cloudanimation2;
משך הנפשה: 15 שניות;
אנימציה-איטרציה-ספירת: אינסופי;
}
המחלקה div cloud2 מוחלת עם המאפיינים המוסברים להלן:-
- ' .cloud2 ' משמש לגישה לענן הכיתה2.
- ' תמונת רקע ' מאפיין מוגדר כ-url(/images/cloud.png), כאשר התמונה היא תיקיה המכילה את התמונה cloud.png.
- ' גודל רקע ' מכיל ערך מוודא את הנראות של התמונה.
- ' רקע-חזרה ' מאפיין עם הערך שהוגדר כ-no-repeat מציג את התמונה כ-No-repeat.
- ' עמדה ' כמו מוחלט ממקם את התמונה ביחס לאלמנט ההורה שלה.
- ' חלק עליון ' מאפיין מגדיר את התמונה ב-100 פיקסלים מלמעלה.
- ' רוֹחַב 'מאפיין משמש כדי להגדיר את הרוחב של אלמנט ה-div.
- ' גוֹבַה 'מאפיין משמש כדי להגדיר את הגובה של אלמנט ה-div.
- ' אנימציה ' מוקצה השם cloudanimation2.
- ' משך אנימציה ' מייצג את משך ההנפשה.
- ' אנימציה-איטרציות-ספירת ” מוקצה לערך אינסופי, אשר יחזור על האנימציה אינסוף פעמים.
ציין @keyframes עבור cloudanimation1
@ keyframes cloudanimation1 {
ל {
שמאל: 0px;
}
מ {
שמאלה: 100 % ;
}
}
ה-cloud1 div קשור עם אנימציה שמתוארת להלן:-
- ' @keyframes cloudanimation1 'השם של אנימציה cloudanimation1 מלווה את מילת המפתח @keyframes המשמשת לציון מעבר.
- מילת המפתח @keyframes מציינת כיצד האנימציה מתבצעת מההתחלה ועד הסוף בתמונות הענן.
- ה ' ל ' ו' מ ' מילות מפתח מציינות שהענן1 יעבור מ-100% ל-0px של המסך.
ציין @keyframes עבור cloudanimation2
@ keyframes cloudanimation2 {
0 % {
שמאלה: 0 % ;
}
100 % {
שמאלה: 100 % ;
}
}
מחלקת div cloud2 משויכת להנפשה המוסברת להלן:-
- ' @keyframes cloudanimation2 ” מייצג את שם האנימציה cloudanimation2 ואחריו מילת המפתח @keyframes המשמשת לציון הנפשה.
- ה ' 0% ' ו' 100% ' מייצגים את ההתחלה והסוף של האנימציה.
- ב-0% מהאנימציה, הענן יהיה בצד שמאל עם הערך מוגדר כ-0%, והוא יעבור בהדרגה ל-100% מהרוחב.
תְפוּקָה
זה מגניב! דנו כיצד נוכל לציין אנימציה לאלמנטים באמצעות מילת המפתח @keyframes בהצלחה.סיכום
CSS מאפשר לנו להחיל סגנונות על רכיבי HTML. האנימציה ב-CSS מבצעת מעברים מסגנון אחד לאחר. הוא מורכב משני רכיבים, סגנונות האנימציה ומסגרות המפתח. סגנונות אנימציה מייצגים מאפיינים שונים כגון שמם, משך הנפשה, ספירת הנפשה-איטרציות ועוד. ואילו רכיב ה-keyframe מגדיר את ההתחלה והסוף של האנימציה. מדריך זה הרחיב כיצד להגדיר פריימים מפתח אנימציה עם דוגמאות.
- הוסף