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

Scroll to Top
דילוג לתוכן