כל מה שאתה צריך לדעת כדי ליישם אנימציות ב- CSS

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

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

אנימציות ב- CSS

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





  • מסגרות מפתח
  • אנימציה
    אנימציות ב- CSS

אנימציות CSS נתמכות בכל הדפדפנים. עם זאת, חלק מהדפדפנים הוותיקים יותר כמו Safari (עד גרסה 8.0) דורשים קידומת (-webkit-) כדי לפרש את מאפייני האנימציה. לדוגמה:

.anim {גובה: 200 פיקסלים רוחב: 200 פיקסלים רקע: מיקום כחול בהיר: רדיוס גבול יחסי: 100% -Webkit-animation-name: cssanim / * דפדפנים ישנים * / -Webkit-animation-משך: 5s / * דפדפנים ישנים * / אנימציה -name: cssanim משך ההנפשה: 5s} / * דפדפנים ישנים * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {שמאל: 300 פיקסלים}}

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



מסגרות מפתח ב- CSS

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

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



  • שֵׁם - נדרש שם לכל אנימציה כדי לתאר את התנהגויותיה.

  • שלבים - הבמה מייצגת השלמת אנימציה. ניתן לעשות זאת באמצעות מילת המפתח 'אל' ו- 'מ' או באחוזים, ואילו 0% מייצג את מצב ההתחלה ו- 100% מייצג את מצב הסיום של אנימציה. היתרון בשימוש בייצוג האחוזי הוא שנוכל להגדיר שלבי ביניים מרובים בין לבין כלומר מה צריכה להיות התנהגות האנימציה בשלב 50% או 75% וכו '.

    .trim () java
  • נכסים - מאפיינים אלה נותנים לנו שליטה על @keyframes כדי לתפעל אותם במהלך האנימציה.

.anim {גובה: 200 פיקסלים רוחב: 200 פיקסלים רקע: אור כחול מיקום: רדיוס גבול יחסית: 100% שם אנימציה: cssanim משך אנימציה: 5 שניות} @ keyframes cssanim {0% {transform: scale (0.5) opacity: 0} 50 % {transform: scale (1.5) אטימות: 1} 100% {transform: scale (1)}}

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

  • התחלתי: מגדיר נכס זה לערך ברירת המחדל שלו.

  • לָרֶשֶׁת: יורש מאפיין זה ממרכיב האב שלו.

מאפייני אנימציה

  • שם אנימציה

זה מציין את שם האנימציה, המשמש ב- @keyframes כדי לתפעל.הערכים האפשריים הם:

  • שֵׁם: זה מציין את השם שיש לאגד למסגרת המפתח לצורך הנפשה.
  • אף אחד: זהו ערך ברירת המחדל וניתן להשתמש בו כדי לעקוף את האנימציות שעברו בירושה או מדורגות.

תחביר:

שם אנימציה: שם | אף אחד | ראשוני | לָרֶשֶׁת

.anim {גובה: 200 פיקסלים רוחב: 200 פיקסלים רקע: מיקום כחול בהיר: רדיוס גבול יחסית: 100% שם אנימציה: cssanim משך אנימציה: 5 שניות} @ keyframes cssanim {0% {שמאל: 0 פיקסלים} 100% {שמאל: 300 פיקסלים} }
  • משך האנימציה

זה מציין את הזמן שלוקח להנפשה להשלים ביצוע אחת. זה מוגדר בשניות או באלפיות השנייה (למשל, 4s או 400ms). ערך ברירת המחדל של מאפיין זה הוא 0 שניות, כך שאם מאפיין זה לא צוין אז האנימציה לא תתקיים.

תחביר:

משך האנימציה: זמן

.anim {גובה: 200 פיקסלים רוחב: 200 פיקסלים רקע: כחול מיקום: רדיוס גבול יחסי: 100% שם אנימציה: cssanim משך אנימציה: 4s} @ keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) אטימות: 1} 100% {transform: scale (1)}}
  • עיכוב אנימציה

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

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

תחביר:

עיכוב אנימציה: זמן

.anim {גובה: 200px רוחב: 200px רקע: מיקום כחול בהיר: רדיוס גבול יחסי: 100% שם אנימציה: cssanim משך אנימציה: 4s עיכוב אנימציה: 4s} @ keyframes cssanim {0% {שמאל: 0px} 100% {שמאל: 250 פיקסלים}}
  • ספירת אנימציה-איטרציה

מאפיין זה מציין את מספר הפעמים שיש להשמיע רצף אנימציה. ערך ברירת המחדל של מאפיין זה הוא 1.הערכים האפשריים הם:

  • מספר - מציין את מספר האיטרציות
  • אֵינְסוֹף - מציין שהאנימציה צריכה לחזור לנצח

תחביר:

ספירת אנימציה-איטרציה: מספר | אֵינְסוֹף

.anim {גובה: 200 פיקסלים רוחב: 200 פיקסלים רקע: מיקום כחול בהיר: רדיוס גבול יחסי: 100% שם אנימציה: cssanim משך אנימציה: 2s אנימציה-איטרציה-ספירה: 4} @ keyframes cssanim {0% {left: 0px} 100% {שמאל: 100 פיקסלים}}
  • כיוון אנימציה

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

  • נוֹרמָלִי - זו התנהגות ברירת המחדל והאנימציה מושמעת קדימה. לאחר כל מחזור האנימציה מגיעה למצב ההתחלתי ומושמעת שוב קדימה

  • לַהֲפוֹך - האנימציה מושמעת בכיוון לאחור. לאחר כל מחזור האנימציה מגיעה למצב הסופי שלה ומשוחקת לאחור

  • לְהַחלִיף - כיוון האנימציה הפוך כלומר הוא משחק קדימה ואז אחורה בכל מחזור. כל מחזור מוזר מעביר אנימציה קדימה וכל מחזור שווה מעניק תנועה לאחור.

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

    ההבדל בין זריקה לזריקות

תחביר:

כיוון אנימציה: רגיל | הפוך |חלופי | חלופי-הפוך

.anim {גובה: 200 פיקסלים רוחב: 200 פיקסלים רקע: מיקום כחול בהיר: רדיוס גבול יחסי: 100% שם אנימציה: cssanim משך אנימציה: 2s אנימציה-איטרציה-ספירה: אינסופי} @ keyframes cssanim {0% {שמאל: 0px} 100% {שמאל: 100 פיקסלים}}
  • פונקציית תזמון אנימציה

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

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

  • לינארי - האנימציה שומרת על אותה מהירות לאורך המחזור, כלומר מההתחלה ועד הסוף.

  • קלות פנימה - האנימציה מתחילה לאט.

  • קלות החוצה - האנימציה נגמרת לאט.

  • קלות החוצה - האנימציה נעה לאט גם במהלך ההתחלה וגם הסיום.

  • bezier מעוקב (n, n, n, n) - תכונה מתקדמת זו מאפשרת לנו ליצור פונקציית תזמון מותאמת אישית על ידי הגדרת הערכים שלנו. הערך האפשרי נע בין 0 ל -1.

תחביר:

התוכנה הטובה ביותר לתכנות Java

פונקציית תזמון אנימציה: לינארית | קלות | קלות החוצה | קלות פנימה | קלות החוצה |bezier מעוקב (n, n, n, n)

.anim {גובה: 200px רוחב: 200px רקע: מיקום כחול בהיר: רדיוס גבול יחסי: 100% שם אנימציה: cssanim משך אנימציה: 2s כיוון אנימציה: הפוך} @ keyframes cssanim {0% {רקע: שמאל כתום: 0px } 50% {רקע: צהוב משמאל: 200 פיקסלים למעלה: 200 פיקסלים} 100% {רקע: כחול שמאל: 100 פיקסלים}}
  • מצב מילוי אנימציה

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

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

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

  • אֲחוֹרָה - הסגנונות נשמרים על ידי האלמנט ברצף האנימציה הראשוני כלומר לפני שהאנימציה נועצת מבט במיוחד בזמן עיכוב האנימציה.

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

תחביר:

מצב מילוי אנימציה: אין | קדימה | אחורה | שניהם

.anim {רוחב: 50px גובה: 50px רקע: צבע כחול בהיר: לבן גופן משקל: מיקום מודגש: שם אנימציה יחסית: cssanim משך אנימציה: 5s אנימציה-איטרציה-ספירה: רדיוס אינסופי של הגבול: 100%} # anim1 { אנימציה-תזמון-פונקציה: הקלות} # אנימ 2 {אנימציה-תזמון-פונקציה: לינארית} # אנימ 3 {אנימציה-תזמון-פונקציה: הקלות- in} # אנימציה 4 {אנימציה-תזמון-פונקציה: הקלות-החוצה} # anim5 {אנימציה- timing-function: ease-in-out} @ keyframes cssanim {מ {left: 0px} ל- {left: 400px}}
  • אנימציה-משחק-מדינה

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

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

תחביר:

אנימציה-הפעלה-מדינה: מושהית | משחק

.anim {רוחב: 100 פיקסלים גובה: 100 פיקסלים רקע: אור כחול מיקום: שם אנימציה יחסי: cssanim משך האנימציה: 3 שניות עיכוב אנימציה: מצב שני מילוי אנימציה: רדיוס גבול לאחור: 100%} @ keyframes cssanim {0% {top: 0px-background-color: orange} 50% {top: 0px-background-color: green} 100% {top: 100pxbackground-color: blue}}
  • אנימציה

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

תחביר:

אנימציה: [שם אנימציה] | [משך האנימציה] | [פונקציית תזמון אנימציה] |[עיכוב אנימציה] | [ספירת חידוש אנימציה] | [כיוון אנימציה] |[מצב מילוי אנימציה] | [מצב אנימציה-הפעלה]

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

.anim {גובה: 200 פיקסלים רוחב: 200 פיקסלים רקע: מיקום כחול בהיר: רדיוס גבול יחסי: 100% שם אנימציה: cssanim משך אנימציה: 2 שניות כיוון אנימציה: אנימציה רגילה-הפעלה-מצב: מושהית} @ keyframes cssanim {0% {רקע: עליון כתום: 0 פיקסלים} 50% {רקע: צהוב משמאל: 200 פיקסלים למעלה: 200 פיקסלים} 100% {רקע: כחול שמאל: 100 פיקסלים}}

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

בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.

יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות בבלוג 'אנימציות ב- CSS' ונחזור אליך.