אנימציות CSS: מדריך עם דוגמאות קוד -

תוכן עיניינים

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

מהן אנימציות CSS?

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

ראה גם קורס HTML5 ו-CSS3 מקיף בחינם

הגדרת @keyframes

הכלל @keyframes מגדיר את השלבים השונים של האנימציה ואת המאפיינים שמשתנים בכל שלב. כל שלב מצוין באחוזים, כאשר 0% הוא תחילת האנימציה ו-100% הוא סופה של האנימציה.

@keyframes example {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: blue; }
}

יישום האנימציה לאלמנט

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

.box {
  width: 120px;
  height: 120px;
  background-color: blue;
  animation-name: example;
  animation-duration: 3s;
}

מאפייני אנימציה חשובים

תיאור
מציין את שם ה-@keyframes המתארים את האנימציה.	`animation-name`
מציין את זמן ההרצה של האנימציה.	`animation-duration`
קובע את קצב ההתקדמות של האנימציה (למשל, `linear`, `ease`).	`animation-timing-function`
קובע את הזמן שיש להמתין לפני תחילת האנימציה.	`animation-delay`
מציין כמה פעמים האנימציה תרוץ (למשל, מספר פעמים או `infinite` ללולאה אין-סופית).	`animation-iteration-count`
קובע את כיוון האנימציה (למשל, `normal`, `reverse`, `alternate`).	`animation-direction`

דוגמה מלאה לאנימציה

<!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>דוגמאה לאנימציה</title>
  <style>
    @keyframes colorAndSizeChange {
      0% { background-color: red; width: 100px; height: 100px; }
      50% { background-color: yellow; width: 150px; height: 150px; }
      100% { background-color: blue; width: 100px; height: 100px; }
    }

    .animated-box {
      display: inline-block;
      background-color: red;
      animation-name: colorAndSizeChange;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <div class="animated-box"></div>
</body>
</html>

ספריות מגניבות ליצירת אנמציות ל CSS

קיימות ספריות וכלים המפשטים את התהליך ומאפשרים להוסיף אנימציות מתוחכמות ומרהיבות לאתרי אינטרנט. אחת מהן היא WebCode Tools, המציעה גנרטור לאנימציות Keyframe. באמצעות הכלי הזה ניתן ליצור אנימציות מותאמות אישית במהירות ובקלות, ללא צורך בכתיבת קוד מסובך. בנוסף, ישנן ספריות כמו Animate.css שמספקות מגוון רחב של אנימציות מוכנות לשימוש, ו-GSAP המאפשרת יצירת אנימציות מורכבות ומותאמות אישית עם ביצועים גבוהים. שימוש בספריות אלו לא רק חוסך זמן, אלא גם מאפשר יצירת חוויות משתמש מרשימות ודינמיות.

סיכום

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