תיעוד CSS עם דוגמאות להרצה: Transition

Q: מה סדר הערכים בקיצור transition?

transition: property duration timing-function delay;, למשל transition: opacity 0.3s ease-in 0.1s;. הכלל הנוקשה היחיד הוא שערך הזמן הראשון הוא המשך והשני הוא ההשהיה. הפרידו בין כמה transitions בפסיקים.

Q: למה ה-transition שלי ב-CSS לא עובד?

סיבות נפוצות: ה-transition נמצא רק בכלל :hover (כך שההנפשה פועלת בכניסה וקופצת חזרה), אי אפשר להנפיש את המאפיין (display, או height ל-auto), למשך אין יחידה (0.3 במקום 0.3s), או שהערך משתנה באותו רגע שבו האלמנט מתווסף לדף.

Q: אפשר להנפיש height: auto?

לא עם transition רגיל של height בכל הדפדפנים: אינטרפולציה ל-auto דורשת את המאפיין החדש יותר interpolate-size, שעדיין לא נתמך בכל מקום. פתרונות עוקפים נפוצים הם הנפשה של grid-template-rows מ-0fr ל-1fr על עוטף grid, או הנפשה של max-height לערך גדול מהתוכן.

transition בדוגמה אחת

transition אומר לדפדפן: כשהמאפיין הזה משתנה, הנפש אותו לאורך הזמן הזה במקום להחליף בבת אחת. שימו אותו בכלל הרגיל של האלמנט, לא רק ב-:hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

העבירו את העכבר מעל הכפתור הראשון: הצבע שלו דוהה לירוק והוא עולה 4px במשך 0.4 שניות, והרחקת הסמן מנגנת את אותו transition בחזרה. לכפתור השני יש transition: none והוא מתחלף מיד. משתמשי מקלדת מקבלים את אותו אפקט דרך :focus-visible.

הקיצור transition

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

מאפיין מלא	מה הוא קובע	ברירת מחדל
`transition-property`	אילו מאפיינים מונפשים (`all`, או רשימה)	`all`
`transition-duration`	כמה זמן, ב-`s` או ב-`ms`	`0s`
`transition-timing-function`	עקומת המהירות	`ease`
`transition-delay`	המתנה לפני ההתחלה (יכולה להיות שלילית)	`0s`

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

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

פונקציות תזמון זו לצד זו

פונקציית התזמון קובעת איך המהירות משתנה במהלך ה-transition. לחצו על Play וכל שבעת הפסים זזים את אותו מרחק באותן 1.5 שניות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

פונקציית תזמון	מרגישה כמו
`linear`	מהירות קבועה, מכנית
`ease` (ברירת מחדל)	התחלה מהירה, עצירה עדינה
`ease-in`	התחלה איטית, סוף מהיר: טוב לדברים שיוצאים
`ease-out`	התחלה מהירה, סוף איטי: טוב לדברים שנכנסים
`ease-in-out`	איטית בשני הקצוות
`cubic-bezier(x1, y1, x2, y2)`	עקומה משלכם; y מעל 1 חורג ומתייצב בחזרה
`steps(n)`	קופצת ב-n צעדים שווים, בלי פריימים באמצע

לאפקטי hover ולתפריטים, ease-out עם משך בין 150ms ל-300ms מרגיש מגיב.

מה אפשר להנפיש

אפשר להנפיש מאפיינים שיש להם ערכי ביניים: צבעים, אורכים (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. מאפיינים שקופצים בין מילות מפתח, כמו display או font-family, מתחלפים בבת אחת.

height: auto הוא המקרה שאנשים נתקלים בו הכי הרבה: לוח שנפתח מ-height: 0 ל-height: auto לא מונפש כברירת מחדל, כי הדפדפן לא מחשב את הערכים שבין 0 ל-"auto". פתרון עוקף אמין הוא עוטף grid שהשורה היחידה שלו עוברת מ-0fr ל-1fr:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded אומר למשתמשי קוראי מסך אם הלוח פתוח, מה שההנפשה לבדה לא עושה.

הרצת קוד כש-transition מסתיים

האירוע transitionend מופעל כש-transition מסתיים, פעם אחת לכל מאפיין. השתמשו בו כדי לעשות משהו אחרי התנועה, כמו העברת פוקוס או הסרת אלמנט:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

כבדו reduced motion

יש אנשים שמפעילים "הפחתת תנועה" בהגדרות המערכת שלהם, כי תנועה על המסך גורמת להם סחרחורת או מסיחה את דעתם. השאירו דהיות של צבע ושל opacity, ובטלו תנועות גדולות, עם media query:

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

שמרו על transitions חלקים

transform ו-opacity הם המאפיינים הזולים ביותר להנפשה: הדפדפן יכול להזיז ולהדהות אלמנט בלי לחשב מחדש את הפריסה. transition על width, height, top או margin גורם לדפדפן לפרוס את הדף מחדש בכל פריים, וזה יכול לגמגם בטלפונים איטיים. כדי להזיז משהו, העדיפו transform: translate() על פני left או margin. הדף על transform מכסה את הפונקציות.

טעויות נפוצות

transition רק בכלל :hover. האפקט מונפש בכניסה אבל קופץ חזרה כשה-hover נגמר. שימו את transition בכלל הבסיסי.
משך בלי יחידה. transition: opacity 300 לא תקין. כתבו 300ms או 0.3s.
transition: all. הוא מנפיש כל מאפיין שמשתנה, כולל כאלה שלא התכוונתם להנפיש, ויכול להפוך שינויי פריסה לאיטיים. פרטו את המאפיינים.
לצפות ש-display: none ידהה. display מתחלף בבת אחת. הדהו במקום זאת את opacity (והגדירו visibility: hidden כשהדהייה מסתיימת).
transition ל-height: auto. הוא קופץ. השתמשו בטכניקת grid-template-rows שלמעלה.
משכים ארוכים באינטראקציות קטנות. כל דבר מעל 400ms בערך על כפתור או תפריט מרגיש איטי.

שאלות נפוצות

איך transitions ב-CSS עובדים?

מצהירים על אלמנט אילו מאפיינים צריכים לזוז בהנפשה ולכמה זמן, למשל transition: background-color 0.3s ease;. כשהערך של המאפיין הזה משתנה (דרך :hover, מחלקה או JavaScript), הדפדפן מנפיש מהערך הישן לחדש במקום להחליף בבת אחת.

מה סדר הערכים בקיצור transition?

transition: property duration timing-function delay;, למשל transition: opacity 0.3s ease-in 0.1s;. הכלל הנוקשה היחיד הוא שערך הזמן הראשון הוא המשך והשני הוא ההשהיה. הפרידו בין כמה transitions בפסיקים.

למה ה-transition שלי ב-CSS לא עובד?

סיבות נפוצות: ה-transition נמצא רק בכלל :hover (כך שההנפשה פועלת בכניסה וקופצת חזרה), אי אפשר להנפיש את המאפיין (display, או height ל-auto), למשך אין יחידה (0.3 במקום 0.3s), או שהערך משתנה באותו רגע שבו האלמנט מתווסף לדף.

אפשר להנפיש height: auto?

לא עם transition רגיל של height בכל הדפדפנים: אינטרפולציה ל-auto דורשת את המאפיין החדש יותר interpolate-size, שעדיין לא נתמך בכל מקום. פתרונות עוקפים נפוצים הם הנפשה של grid-template-rows מ-0fr ל-1fr על עוטף grid, או הנפשה של max-height לערך גדול מהתוכן.

מה ההבדל בין transition ל-animation ב-CSS?

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

מושגים קשורים