כיצד ליצור הנפשות של CSS Keyframe

CSS נותן למפתחים את היכולת להחיות את דפי האינטרנט שלהם באמצעות הנפשת מסגרות מפתחות.

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

---

---

כיצד למחוק מעבר עמודים במילה

• רוֹחַב
• גוֹבַה
• עמדה
• צֶבַע
• אֲטִימוּת

מאפייני CSS כלליים אלה מנוהלים על ידי רכיבי CSS ספציפיים ליצירת התוצאה הרצויה. אם אי פעם נתקלת באלמנט מונפש בדף אינטרנט, רוב הסיכויים שהאלמנט הופעל באמצעות אנימציה של מסגרות מפתח.

מהו אלמנט מסגרות Keyframes?

ה אלמנט מסגרות מפתח יכול לשמש על רכיב HTML אחד או יותר שיש לו גישה אליו. הוא מזהה נקודה מסוימת במצב של אלמנט ומכתיב את המראה שיש לאלמנט זה להיות בזמן זה.

זה אולי נשמע הרבה לעיכול, אבל למעשה זה די פשוט. ה אלמנט מסגרות מפתח בעל מבנה די פשוט שניתן להבין ולהתאים אותו לכל דרישת הנפשה.

דוגמת מבנה של מסגרות מפתחות


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

נניח שאתה רוצה להנפיש לחצן מלבני ירוק על ידי הפיכתו לכפתור עגול כחול.

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

---

---

אם אתה חושב, זה לא נשמע יותר מדי כמו אנימציה. ובכן, הסיבה לכך היא שרכיב מרכזי בכל התהליך הזה טרם הוצג --- רכיב זה הוא נכס האנימציה.

נכס האנימציה

ה נכס אנימציה יש קבוצה של תכונות משנה שונות; אלה משמשים בשילוב עם מבנה מסגרות המפתחות למעלה כדי להנפיש את רכיב ה- HTML הרצוי.

---

---

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

• שם אנימציה
• משך האנימציה
• אנימציה-תזמון-פונקציה
• עיכוב אנימציה
• אנימציה-איטרציה-ספירה

שימוש בהנפשה בדף אינטרנט

באמצעות התרחיש למעלה, המטרה היא ליצור כפתור מונפש.

דוגמת הנפשת לחצן







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!




קטע האנימציה בקוד למעלה מכיל את חמשת מאפייני המשנה שהוזכרו קודם לכן. לכל נכס יש פונקציה מאוד מובחנת ויחד הם פועלים להנמיית כל רכיב HTML שאליו הם נועדו למקד.

קשור: כיצד למקד לחלק מדף אינטרנט באמצעות CSS Selectors

המאפיין בשם אנימציה

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

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

הנכס משך האנימציה

מאפיין זה משמש להגדרת משך הזמן של אלמנט מונפש צריך לקחת בעת מעבר ממצב אחד למשנהו.

בדוגמה למעלה, ה- נכס למשך אנימציה מוגדר ל -5 שניות (5 שניות), כך שלכפתור המלבני הירוק יהיו סך הכל 5 שניות לפני שהוא הופך במלואו לכפתור עגול כחול.

המאפיין עיכוב הנפשה

נכס זה חשוב מסיבה אחת; כמה דפי אינטרנט עשויים להימשך מספר שניות להטענה מלאה (בגלל מספר גורמים שונים). אז ה נכס עיכוב אנימציה מונע מההנפשה להתחיל מיד למקרה שדף האינטרנט ייקח קצת זמן להיטען.

בדוגמה למעלה, ה- נכס עיכוב אנימציה מוגדר ל- 4s, כלומר האנימציה לא תתחיל עד 4 שניות לאחר הביקור בדף האינטרנט (מה שנותן לדף האינטרנט מספיק זמן לטעון לפני תחילת ההנפשה).

נכס ספירת האנימציה

מאפיין זה קובע כמה פעמים האלמנט המונפש צריך לעבור ממצב אחד למשנהו. ה רכוש אנימציה-איטרציה לוקח ערכים שהם מילים ומספרים. ערך המספר יכול להיות כל דבר מ -1 ומעלה, בעוד ערך המילה הוא בדרך כלל אֵינְסוֹף .

בדוגמה למעלה, ה- ערך אנימציה-איטרציה-ספירת ערך נקבע ל אֵינְסוֹף , כלומר כל עוד דף האינטרנט עולה, נכס הכפתור יונפש ממדינה למדינה, ללא הרף.

תכונת האנימציה-תזמון-פונקציה

מאפיין זה מכתיב את תנועת האלמנט המונפש כשהוא עובר ממצב אחד למשנהו. ה תכונת אנימציה-תזמון-פונקציה בדרך כלל מוקצה אחד משלושת ערכי הקלות.

• קלות
• קלות
• קלות פנימה

ה ערך קלות פנימה משמש לעיל; זה עובר לאט לאט את האנימציה ממצב אחד לשני. אם המטרה היא ליצור מעבר איטי כאשר הכפתור הופך ממלבן ירוק לעיגול כחול היית משתמש ב ערך קלות . אם רק היית רוצה את המעבר האיטי בכיוון ההפוך היית משתמש ב ערך קלות .

צמצום הקוד שלנו

ברוב המקרים, צמצום אורך התוכנית נתפס כגישה מעשית. הסיבה לכך היא בעיקר שפחות שורות קוד מפחיתות את הסבירות שהשגיאות לא יעלמו מעיניהם בתוכניות שלך.

ניתן לצמצם את הקוד לעיל בארבע שורות. ניתן להשיג זאת פשוט על ידי שימוש במאפיין האנימציה מבלי לזהות במפורש כל אחד מנכסי המשנה שלו.

הקטנת הקוד לדוגמה של אנימציה לחצנים







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}