מה זה transition?

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

• transition-property - מגדיר את המאפיינים שיתבצע עליהם המעבר.
• transition-duration - מגדיר את משך זמן המעבר.
• transition-timing-function - קובע את התנהגות המעבר לאורך הזמן, לדוגמה: linear, ease, ease-in, ease-out.
• transition-delay - מגדיר עיכוב לפני שהמעבר מתחיל.

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

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

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

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

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

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

    
          <style>
            .box {
              width: 100px;
              height: 100px;
              background-color: lightblue;
              transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
            }
            .box:hover {
              background-color: lightcoral;
              width: 150px;
            }
          </style>
          <div class="box">
            מעבר
          </div>