Animate.css קיים כבר כמה שנים ואני חייב להודות שאיחרתי די למסיבה. גיליתי את זה רק לפני כמה חודשים כשחיפשתי ברשת כמה הדרכות בנושא אנימציית CSS ומצאתי מה שצריך להיות הדרך המהירה והפשוטה ביותר להנפשה, Animate.css.
נוצר על ידי בחור בשם דן עדן, Animate.css הוא דרך מהירה לראות כיצד CCS עובד ולקבל פעולות אנימציה באתר האינטרנט שלך.
תיאור כ- 'הוסף רק מים CSS אנימציה' אנימציה.css זה קצת כיף עם צד רציני. זה מאפשר אפילו למעצבי אתרים חובבים כמוני להכיר במהירות את היסודות של אנימציית CSS וליצור אפקטים פשוטים אך יעילים לאתרי אינטרנט. מכותרת מונפשת יחידה לתנועות מעורבות יותר, כלי זה יכול לעשות זאת.
אנימציה
ניתן להוריד את Animate.css מ- GitHub והיא בעצם ספרייה של אפקטים פשוטים של CSS שנאספים במקום אחד. כל אנימציה ארוזה יפה ומוכנה לשימוש. כל שעליך לעשות הוא למצוא את האנימציה שאתה אוהב ולהשתמש בכיתה. זה באמת כל מה שיש בזה.
אינך צריך להוריד את כל הספרייה אם אינך רוצה מכיוון שיש בה 2, 500 שורות קוד. תוכלו לבקר באתר Animate.css, למצוא אנימציה ולחץ על הקישור הורד Animate.css. זה מעמיס את הכיתה לדף אינטרנט כדי שתוכל להעתיק ולהשתמש בו כראות עיניך.
קל יותר להשתמש ב- GitHub ולבצע מקדחות למטה כדי למצוא את האפקט שאתה מחפש.
- נווט לדף ה- GitHub של css.
- לחץ על קישור מקור כדי לגשת לרשימת האלמנטים.
- בחר את סוג האפקט שאתה מחפש מהרשימה. עזיבה היא מחפשת תשומת לב, אז בחר בקישור תשומת לב_מחפשים.
- בחר bounce.css.
- העתק את הקוד והניח אותו על הדף שלך כדי להחיל את האנימציה.
זה כל כך פשוט. ברור שתבחר באפשרויות שונות עבור האפקטים השונים, אך התוצאה הסופית זהה. גישה לקוד הדרוש לביצוע ההרמה הכבדה בעמוד.
בניית אובייקט מונפש עם Animate.css
בניית משהו מגניב עם Animate.css זה פשוט. זה רק עניין של למצוא את קוד CCS ולהוסיף אותו ל- CSS משלך. אם אני יכול לעשות את זה, כל אחד יכול!
האפשרות הראשונה בדף Animate.css היא הקפצה, אז נשתמש בזה בדוגמה זו.
- הדבק ' 'בפנים בגיליון הסגנונות שלך.
- מצא את CSS עבור האנימציה הרצויה והוסף אותו לאלמנט שתרצה להנפיש. לדוגמה, הוסף ' להוסיף את אפקט ההקפצה הזה למבחן, תמונה או כל דבר אחר.
- הוסף את קוד ה- CSS הבא כדי שהכל יעבוד. נלקח מה- bounce.css שלמעלה.
@keyframes להקפיץ {
מ-, 20%, 53%, 80%, ל {
פונקצית עיתוי אנימציה: מעוקב קובץ (0.215, 0.610, 0.355, 1.000);
טרנספורמציה: translate3d (0, 0, 0);
}
40%, 43% {
פונקצית תזמון אנימציה: מעוקב-קובייה (0.755, 0.050, 0.855, 0.060);
טרנספורמציה: translate3d (0, -30px, 0);
}
70% {
פונקצית תזמון אנימציה: מעוקב-קובייה (0.755, 0.050, 0.855, 0.060);
טרנספורמציה: translate3d (0, -15px, 0);
}
90% {
טרנספורמציה: translate3d (0, -4px, 0);
}
}
.להקפיץ {
שם אנימציה: להקפיץ;
טרנספורמציה-מקור: תחתית מרכזית;
}
ממשיכים הלאה את האנימציה עם Animate.css
הרצף שלמעלה מוסיף אפקט ניתור כאשר העמוד נטען לראשונה, וזה מגניב אבל דבר חד פעמי. מה דעתך להוסיף אותו לרחף. ככה, בכל פעם שמישהו מרחף את המבחן, זה מקפיץ. זה לא משהו שהייתי עושה באתר הפקות, אבל זו דרך נהדרת להדגים איך הכל עובד.
הוסף את הקוד הבא ל- CSS שלך כדי להוסיף את אפקט הכניסה לרחף., בכל פעם שהעכבר מרחף מעל האלמנט, עליו להקפיץ.
אישרו: רחף {
-Webkit-Animation משך: 1s;
-moz-animation-משך: 1s;
-ms-animation-משך: 1s;
משך האנימציה: 1s;
משך האנימציה: 1s;
-webkit-animation-fill-mode: שניהם;
-moz-animation-fill-mode: שניהם;
-ms-animation-fill-mode: שניהם;
-או-אנימציה-מילוי-מצב: שניהם;
מצב אנימציה-מילוי: שניהם;
}
אם אתה מכיר את CSS, אתה תדע הרבה יותר טוב ממני כיצד ליישם אפקטים שונים לפעולות שונות. כמתחיל, זה והספריות המסופקות ב- Animate.css עוזרים לי ליצור אנימציות בסיסיות אך יעילות לדפי האינטרנט שלי.
אני לא יודע בכמה הייתי משתמש באתר חי שכן הם לא תמיד יורדים טוב מדי ומשתמשי סלולרי לא נראים כמוהם בכלל. עם זאת, כשיעור כיצד CSS עובד וכיצד ניתן להשתמש בו כדי לשפר את הרשת, זהו משאב נהדר. אני רק מתחיל אבל אפילו לבלות כמה שעות עם Animate.css ללימוד זה לימד אותי המון. אני חושב שאשחק עם זה הרבה יותר לפני שאסיים. מה איתך?
