وثائق CSS قابلة للتشغيل: transition في CSS

Q: ما ترتيب القيم في الاختصار transition؟

transition: property duration timing-function delay;، مثلًا transition: opacity 0.3s ease-in 0.1s;. القاعدة الصارمة الوحيدة أن قيمة الزمن الأولى هي المدة والثانية هي التأخير. افصل بين عدة انتقالات بفواصل.

Q: لماذا لا يعمل الانتقال في CSS عندي؟

أسباب شائعة: transition موجودة في قاعدة :hover وحدها (فيتحرك التأثير عند الدخول ويرتد فجأة)، أو الخاصية لا يمكن تحريكها (display، أو height إلى auto)، أو المدة بلا وحدة (0.3 بدل 0.3s)، أو القيمة تتغير في اللحظة نفسها التي يُضاف فيها العنصر إلى الصفحة.

Q: هل يمكن تحريك height: auto؟

ليس بانتقال height عادي في كل المتصفحات: الاستيفاء إلى auto يحتاج إلى الخاصية الأحدث interpolate-size، وهي غير مدعومة في كل مكان بعد. الحلول الشائعة: تحريك grid-template-rows من 0fr إلى 1fr على غلاف grid، أو تحريك max-height إلى قيمة أكبر من المحتوى.

انتقال في مثال واحد

يخبر الانتقال المتصفح: حين تتغير هذه الخاصية، حرّكها خلال هذه المدة بدل التبديل فورًا. ضعه على القاعدة العادية للعنصر، لا على :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: 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;
}

دوال التوقيت جنبًا إلى جنب

تقرر دالة التوقيت كيف تتغير السرعة أثناء الانتقال. اضغط 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 خطوات متساوية، بلا إطارات بينها

لتأثيرات التمرير والقوائم، تبدو 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 مستخدمي قارئات الشاشة هل اللوحة مفتوحة، وهو ما لا تقوله الحركة وحدها.

تشغيل شيفرة حين ينتهي الانتقال

يُطلق الحدث transitionend حين ينتهي الانتقال، مرة لكل خاصية. استخدمه لفعل شيء بعد الحركة، مثل نقل التركيز أو إزالة عنصر:

<!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>

احترم تقليل الحركة

يفعّل بعض الناس «تقليل الحركة» في إعدادات أنظمتهم لأن الحركة على الشاشة تصيبهم بالدوار أو تشتتهم. أبقِ تلاشي اللون والشفافية، واحذف الحركات الكبيرة، باستعلام وسائط:

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

اجعل الانتقالات سلسة

transform وopacity أرخص الخصائص تحريكًا: يستطيع المتصفح تحريك العنصر وإبهاته من دون إعادة حساب التخطيط. أما تحريك width أو height أو top أو margin فيجعل المتصفح يعيد ترتيب الصفحة في كل إطار، وقد يتقطع ذلك على الهواتف البطيئة. لتحريك شيء، فضّل transform: translate() على left أو margin. تشرح صفحة transform الدوال.

أخطاء شائعة

transition في قاعدة :hover وحدها. يتحرك التأثير عند الدخول لكنه يرتد فجأة حين ينتهي التمرير. ضع transition على القاعدة الأساسية.
مدة بلا وحدة. transition: opacity 300 غير صالحة. اكتب 300ms أو 0.3s.
transition: all. تحرّك كل خاصية تتغير، بما فيها ما لم تقصد تحريكه، وقد تجعل تغييرات التخطيط بطيئة. اذكر الخصائص.
توقع أن يتلاشى display: none. تتبدل display فورًا. حرّك opacity بدلًا من ذلك (واضبط visibility: hidden حين ينتهي التلاشي).
الانتقال إلى height: auto. يقفز. استخدم طريقة grid-template-rows أعلاه.
مدد طويلة للتفاعلات الصغيرة. أي شيء يزيد على نحو 400ms في زر أو قائمة يبدو بطيئًا.

الأسئلة الشائعة

كيف تعمل الانتقالات في CSS؟

تصرّح على العنصر بالخصائص التي يجب تحريكها وبمدة ذلك، مثلًا transition: background-color 0.3s ease;. حين تتغير قيمة تلك الخاصية (عبر :hover أو فئة أو JavaScript)، يحرّك المتصفح القيمة القديمة إلى الجديدة بدل التبديل فورًا.

ما ترتيب القيم في الاختصار transition؟

transition: property duration timing-function delay;، مثلًا transition: opacity 0.3s ease-in 0.1s;. القاعدة الصارمة الوحيدة أن قيمة الزمن الأولى هي المدة والثانية هي التأخير. افصل بين عدة انتقالات بفواصل.

لماذا لا يعمل الانتقال في CSS عندي؟

أسباب شائعة: transition موجودة في قاعدة :hover وحدها (فيتحرك التأثير عند الدخول ويرتد فجأة)، أو الخاصية لا يمكن تحريكها (display، أو height إلى auto)، أو المدة بلا وحدة (0.3 بدل 0.3s)، أو القيمة تتغير في اللحظة نفسها التي يُضاف فيها العنصر إلى الصفحة.

هل يمكن تحريك height: auto؟

ليس بانتقال height عادي في كل المتصفحات: الاستيفاء إلى auto يحتاج إلى الخاصية الأحدث interpolate-size، وهي غير مدعومة في كل مكان بعد. الحلول الشائعة: تحريك grid-template-rows من 0fr إلى 1fr على غلاف grid، أو تحريك max-height إلى قيمة أكبر من المحتوى.

ما الفرق بين transition وanimation في CSS؟

يعمل الانتقال مرة واحدة، بين قيمتين، حين تتغير خاصية. أما الحركة animation فتستخدم @keyframes، ويمكن أن تكون لها خطوات كثيرة، وتبدأ من تلقاء نفسها عند تحميل الصفحة، ويمكن أن تتكرر أو تدور بلا توقف.

مفاهيم ذات صلة