מאמר זה מדגים הדגמה מעשית להפעלה/הוספת אנימציות CSS מרובות בו-זמנית.
כיצד לשחק אנימציות CSS מרובות בו זמנית?
על ידי יישום מספר אנימציות CSS בו-זמנית, המפתחים יכולים ליצור בקלות ממשקים מרתקים יותר. כדי להפעיל אנימציות CSS רבות בו-זמנית, תן לכל אחת שם ייחודי והחל את השמות הללו על אותם רכיבים או נפרדים בדף.
בצע את ההליך שלהלן כדי להפעיל/להוסיף יותר מהנפשה אחת בו-זמנית.
שלב 1: יצירת מבנה
ראשית, צור אלמנט HTML שבו האנימציות מיושמות בשלבים הקרובים. לדוגמה, התמונה הולכת להיות מוכנסת:
< div מעמד = 'לְהַקִיף' >
< img src = 'book.jpg' גוֹבַה = '100 פיקסלים' רוֹחַב = '100 פיקסלים' מעמד = 'לְהַנפִּישׁ' >
< / div >
בקטע הקוד שלמעלה:
- ראשית, נתיב התמונה מוגדר ל' src ' תכונה.
- לאחר מכן, הערך של ' 100 פיקסלים ' מסופק למאפייני 'רוחב' ו'גובה' של CSS.
- כמו כן, הגדר את הערך של ' לְהַנפִּישׁ ' אל ה ' מעמד ' תכונה.
שלב 2: הגדרת אנימציות
ה ' מסגרות מפתח 'משמשים ליצירת אנימציות מותאמות אישית בהתאם לצורך של דף האינטרנט. לדוגמה, שתי אנימציות נוצרות בקטע הקוד שלהלן:
@-webkit-keyframes מסתובב {100 % {
טרנספורמציה: סובב ( 180 מעלות ) ;
}
}
סולם @-webkit-keyframes {
100 % {
טרנספורמציה: scaleX ( 1 ) scaleY ( 1 ) ;
}
}
בקטע הקוד שלמעלה:
- קודם ה ' @-webkit-keyframes נעשה שימוש במנגנון כדי להגדיר את סיבוב ' ו' להתחלף אנימציות בשם.
- לאחר מכן, השתמש ב' שינוי צורה ' נכס בעל ערך של ' להתחלף() ' בתוך ה ' סיבוב גוף אנימציה. פונקציה זו מסובבת את האלמנט בזווית של ' 180 מעלות '.
- לאחר מכן, הגדר את האנימציה שתגדיל או תרחיב את האלמנט המקורי בגורם של ' 1 ' בשניהם ' איקס ' ו' ו ציר ' ב' סוּלָם גוף אנימציה.
שלב 3: החלת אנימציה על רכיבי HTML
בתוך חלק ה-CSS, בחר את המחלקה ' לְהַנפִּישׁ ' אשר מוקצה ל' ', וספק את מאפייני ה-CSS הבאים:
מיקום: מוחלט;
שמאלה: 60 %;
רוֹחַב : 110px;
גוֹבַה : 110px;
שוליים: -40 פיקסלים 0 0 -40px;
-webkit-animation: קנה מידה 3s ליניארי אינסופי;
-webkit-animation: ספין 2s ליניארי אינסופי;
}
תיאור המאפיינים המשמשים בבלוק הקוד לעיל:
- ראשית, הגדר את הערך של ' מוּחלָט 'ל-CSS' עמדה ' תכונה. זה מיישר את ' img ' אלמנט לפי האנימציה.
- לאחר מכן, ספק את הערכים של ' 60% ', ' 110 פיקסלים ' ו' 110 פיקסלים 'ל-CSS' שמאלה ', ' רוֹחַב ' ו' גוֹבַה ' נכסים. מאפיינים אלה משמשים כדי לקבוע את המיקום והגודל של אלמנט.
- לאחר מכן, הגדר את הערך של ' סולם 3s ליניארי אינסופי ' אל ה ' -webkit-אנימציה ' נכס CSS.
- וה ' 3 שניות ' הוא משך האנימציה, ה-' אֵינְסוֹף ' הוא משך ההנפשה, וה-' ליניארי ' הוא הכיוון של האנימציה.
- בסופו של דבר, ספק את הערכים של ' ספין 2s ליניארי אינסופי 'ל-CSS' -webkit-אנימציה ' תכונה. מאפיין זה מוסיף את האנימציה השנייה בשם ' סיבוב ' על ' img ' אלמנט.
לאחר הידור של בלוק הקוד לעיל, האנימציה נראית כך:
הגיף לעיל ממחיש שרק ' סיבוב אנימציה משחקת על האלמנט הממוקד.
שלב 4: הפעלת אנימציות מרובות ברכיבי HTML
כמו בשלב שלמעלה, רק אנימציה אחת הוחלה על האלמנט. הסיבה לכך היא שמספר ערכים הוקצו לאותו ' -webkit-אנימציה ' תכונה.
כדי לפתור בעיה זו, עטוף את רכיב היעד ברכיב HTML אחר. בתור ' div ' כבר בשימוש כעטיפה בשלב הראשון, בחר את ' לְהַקִיף ' ועדכן את הקוד כמו:
.לְהַנפִּישׁ {מיקום: מוחלט;
שמאלה: 60 %;
רוֹחַב : 110px;
גוֹבַה : 110px;
שוליים:-40 פיקסלים 0 0 -40px;
-webkit-animation: קנה מידה 3s ליניארי אינסופי;
}
. לְהַקִיף {
עמדה: קרוב משפחה;
למעלה: 160px;
-webkit-animation: ספין 2s ליניארי אינסופי;
}
בקוד למעלה:
- בהתחלה, ה' לְהַנפִּישׁ המחלקה נשארת זהה ורק האנימציה השנייה מוסרת ממנה שממוקמת ב-' לְהַקִיף ' מעמד.
- לאחר מכן, הגדר את המיקום באמצעות ' עמדה ' ו' חלק עליון ' נכסים.
לאחר ביצוע קטע הקוד לעיל, דף האינטרנט מופיע כעת כך:
הפלט מראה ששתי האנימציות הוחלו על רכיב ה-HTML שנבחר בו-זמנית.
סיכום
כדי להחיל מאפייני CSS מרובים, עטוף את האלמנט ברכיבי HTML והחל עליהם אנימציות כך שכל רכיב HTML יכיל הנפשה בודדת. כאשר מאפיין הצאצא יורש את האנימציה המוחלת על רכיב HTML האב, מוחלות אנימציות מרובות מבלי לגרום לשגיאות או אי בהירות עבור המהדר. זה הנוהל לנגן/להוסיף יותר מהנפשת CSS אחת בו-זמנית.