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

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

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

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

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

הגדרת @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 מאפשרות להוסיף חיים ותנועה לאלמנטים בדפי האינטרנט בצורה פשוטה ויעילה. באמצעות שימוש נכון ב-@keyframes ובמאפייני האנימציה השונים, ניתן ליצור חוויות משתמש עשירות ואינטראקטיביות.