מאמר זה מדגים את התהליך של הוספת אנימציות ומעברים מרובי-שלבים.
כיצד להשתמש בהנפשות ובמעברים מרובי-שלבים?
כדי ליצור אנימציה מרובת שלבים, נוצרת סדרה של פריימים מפתח. הוא מציין את סדרת השינויים שיש להחיל על רכיב ה-HTML שנבחר. כל פריים מפתח מייצג מצב שונה של האנימציה, והדפדפן מעביר בצורה חלקה את האלמנט בין המצבים הללו. בזמן מעברים, ציין את השינוי החלק של מאפייני CSS לאורך זמן מוגדר על ידי אינטראקציות משתמש או שינויי מצב.
הבה נעבור על דוגמה מעשית להבנה טובה יותר:
דוגמה 1: החלת אנימציה מרובת שלבים
בדוגמה זו, אנימציה מרובה שלבים תחול על רכיב ה-HTML שנבחר. בקר בהדגמה הבאה:
< סִגְנוֹן >
.animationExample {
רוחב: 130 פיקסלים;
גובה: 130 פיקסלים;
צבע רקע: ירוק יער;
עמדה: קרוב משפחה;
אנימציה: moveAnimate 4s קלות-in-out אינסופי;
}
< / סִגְנוֹן >
< גוּף >
< div מעמד = 'דוגמה אנימציה' >< / div >
< / גוּף >
בקטע הקוד שלמעלה:
- ראשית, הכיתה בשם ' אנימציה לדוגמה ' נבחר בתוך ' <סגנון> 'תג.
- לאחר מכן, הערכים של ' 130 פיקסלים ' מוקצים ל' גוֹבַה ' ו' רוֹחַב ' נכסים.
- בנוסף, הגדר ' ירוק יער ' ו' קרוב משפחה ' כערך עבור ' צבע רקע ' ו' עמדה ' מאפיינים לשיפור ההדמיה.
- לאחר מכן, השתמש ב-' אנימציה ' מאפיין והגדר אותו שווה ל' moveAnimate 4s קלה-in-out ללא סוף 'כדי ליישם אנימציות.
- הערך מורכב מארבעה חלקים, הראשון הוא אנימציית השם המותאם אישית, השני הוא משך הזמן להשלמתו, השלישי הוא סוג האנימציה והרביעי הוא הגבול למספר הפעמים שהאנימציה הזו תחול.
- בסופו של דבר, צור אלמנט HTML והקצה את ' אנימציה לדוגמה 'כיתה לזה.
כעת, השתמש ב' מסגרות מפתח ' כלל להגדרת המנהג ' להעביר אנימציה ' אנימציה:
@ moveAnimate מסגרות מפתח {0 % {
שמאלה: 0 ;
צבע רקע: כחול;
}
חמישים % {
שמאל: 200px;
צבע רקע: ירוק יער;
טרנספורמציה: סובב ( 180 מעלות ) ;
}
100 % {
שמאלה: 0 ;
צבע רקע: כחול;
}
}
בגוש הקוד שלמעלה:
- קודם ה ' @keyframes נוצר בלוק יחד עם השם של האנימציה המותאמת אישית שתוגדר.
- לאחר מכן, צור בלוק בשם ' 0% ' שמחיל סגנונות CSS בתחילת האנימציה. ולהשתמש ב' צבע רקע ' ו' שמאלה 'מאפייני CSS.
- כעת, צור בלוק בשם ו- ' חמישים% ' לסגנן באמצע האנימציה. הוא מספק את הערכים של ' 200 פיקסלים ', ' ירוק יער ' ו' סובב (180 מעלות) ' למאפיינים 'שמאל', 'צבע רקע' ו'טרנספורמציה'. זה מאפשר לרכיב שנבחר לסובב את ה-200 פיקסלים שמאלה.
לאחר הידור של בלוק הקוד לעיל:
הפלט מראה שהאנימציה מרובת השלבים הוחלה על רכיב ה-HTML שנבחר.
דוגמה 2: החלת מעבר רב-שלבי
כדי להחיל את המעבר הרב-שלבי, ניתן להשתמש בבוררי ה-CSS יחד עם ' מַעֲבָר ' תכונה. בקר בקוד שלהלן:
.fade {
אטימות: 1;
מעבר: אטימות 1s;
}
.fade:hover {
אטימות: 0;
}
<
/ סגנון>
<
גוף>
< ע מעמד = 'לִדעוֹך' > רחף מעלי כדי לראות את המעבר. < / ע >
< / גוּף >
ההסבר של הקוד לעיל:
- ראשית, המנהג ' לִדעוֹך נבחרה המחלקה והערך של 1 מסופק ל- אֲטִימוּת ' תכונה. כמו כן, הגדר את הערך של ' אטימות 1s ' אל ה ' מַעֲבָר ' נכס CSS. זה מגדיר או מסיר את האטימות בפרק זמן של ' 1 שניות '.
- לאחר מכן, ה' :לְרַחֵף הבורר מוקצה ל- לִדעוֹך ' מעמד. בו, הערך של ' 0 ' מוגדר למאפיין האטימות.
- בסופו של דבר, אלמנט ה-HTML נוצר בתוך ' <גוף> תג ', והמעמד של ' לִדעוֹך 'מצורף אליו.
לאחר סיום שלב ההידור, דף האינטרנט מופיע כך:
ה-GIF מציג שמעבר הדהייה המותאם אישית הוחל על רכיב ה-HTML שנבחר.
סיכום
האנימציות והמעברים מרובי השלבים מביאים חיים לדפי האינטרנט של HTML על ידי הוספת תנועה ואפקטים חזותיים. עבור אנימציה, ' מסגרות מפתח ' מנוצלים יחד עם אחוז משך הזמן כמו ' 0% 'היא ההתחלה,' חמישים% ' הוא האמצע, ו' 100% ' הוא סוף משך האנימציה. עבור המעבר, ניתן להשתמש בבורר ה-CSS יחד עם ' מַעֲבָר ' מעמד. מאמר זה הדגים את תהליך השימוש באנימציות ומעברים מרובי-שלבים.