מה זה animation?

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

• animation-name - מגדיר את שם האנימציה שמופיעה מתוך קבוצה של אנימציות שהוגדרו מראש.
• animation-duration - מגדיר את משך זמן האנימציה.
• animation-timing-function - קובע את התנהגות האנימציה לאורך הזמן שלה, לדוגמה: linear, ease, ease-in, ease-out.
• animation-delay - מגדיר עיכוב לפני שהאנימציה מתחילה.
• animation-iteration-count - מגדיר כמה פעמים האנימציה תחזור.
• animation-direction - מגדיר אם האנימציה תתנהל בכיוונים שונים.
• animation-fill-mode - מגדיר מה קורה עם האלמנט לאחר סיום האנימציה.

שימוש במאפיין animation

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

דוגמה לשימוש ב-animation

להלן דוגמה לשימוש במאפיין animation:

שימושים מתקדמים

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

    
          <style>
            @keyframes example {
              from { background-color: red; }
              to { background-color: yellow; }
            }
            .animated {
              animation-name: example;
              animation-duration: 4s;
              animation-timing-function: ease-in-out;
              animation-delay: 1s;
              animation-iteration-count: infinite;
              animation-direction: alternate;
              animation-fill-mode: forwards;
            }
          </style>
          <div class="animated" style="width: 100px; height: 100px;">
            אנימציה
          </div>