Lesson 39 / الدرس 39

Transitions / الانتقالات

Make a property change smoothly instead of snapping instantly, with transition-property, -duration, -timing-function, -delay, and the shorthand that combines them.

اجعل تغيّر خاصية ما تدريجيًا بدل أن يقفز فجأة، عبر transition-property و -duration و -timing-function و -delay، والاختزال الذي يجمعها معًا.

You already know that a pseudo-class like :hover lets a rule apply only while the pointer sits over an element. By default, the change from the normal state to the :hover state is instant — one frame the button is blue, the next it is dark blue, with nothing in between. A transition fills in that gap: instead of jumping, the property animates smoothly from its old value to its new one over a duration you choose.

أنت تعرف بالفعل أن صنفًا زائفًا مثل :hover يجعل قاعدة تُطبَّق فقط ما دام المؤشر فوق عنصر. وافتراضيًا، الانتقال من الحالة العادية إلى حالة :hover فوري: في لحظة الزر أزرق، وفي التالية أزرق داكن، بلا أي شيء بينهما. والانتقال يملأ هذه الفجوة: بدل أن تقفز الخاصية، تتحرك بسلاسة من قيمتها القديمة إلى الجديدة خلال مدة تختارها.

Four properties that control a transition

Property	Controls	Example
transition-property	Which property animates	background-color
transition-duration	How long it takes	0.3s
transition-timing-function	How the speed changes over that time	ease-in-out
transition-delay	How long to wait before starting	0.1s

All four together describe one transition. Only transition-property and transition-duration are required for anything visible to happen.

الخصائص الأربع معًا تصف انتقالًا واحدًا. ولا يلزم فعليًا لحدوث تأثير مرئي سوى transition-property و transition-duration.

.btn {
    background-color: navy;
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

.btn:hover {
    background-color: tomato;
}

Hover the button in the preview. The color change now takes 0.3 seconds and eases in and out, instead of snapping.

The shorthand: `transition`

الاختزال: transition

Writing all four longhand properties gets repetitive, so almost every real stylesheet uses the shorthand instead: transition: property duration timing-function delay;. The delay is optional and can be left off entirely.

كتابة الخصائص الأربع كاملة تصبح مملة، فتستخدم كل ملفات التنسيق الحقيقية تقريبًا الاختزال بدلًا منها: transition: الخاصية المدة دالة‌التوقيت التأخير;. والتأخير اختياري ويمكن حذفه كليًا.

.btn {
    background-color: navy;
    transition: background-color 0.3s ease-in-out;
}

.btn:hover {
    background-color: tomato;
}

The exact same effect as before, in one line. Add a fourth value, like 0.15s, and the color change would wait that long before it starts.

التأثير نفسه بالضبط، في سطر واحد. أضف قيمة رابعة، مثل 0.15s، وسينتظر تغيّر اللون تلك المدة قبل أن يبدأ.

ease — starts slow, speeds up, ends slow (the default)
linear — the same speed from start to finish
ease-in — starts slow, then speeds up
ease-out — starts fast, then slows down

كتابة transition داخل :hover فقط هو الخطأ الكلاسيكي: .btn:hover { transition: background-color 0.3s; background-color: tomato; } تتحرك بسلاسة عند الدخول، لأن قاعدة الانتقال موجودة لحظة بدء hover — لكنها تقفز فجأة للخلف لحظة يبتعد المؤشر، لأن قاعدة .btn الأساسية لم يكن لديها انتقال خاص بها لتتحرك به. ضع transition على المُحدِّد الأساسي، لا على :hover وحده، ليتحرك الاتجاهان كلاهما.

تسمية الخاصية المراد تحريكها بدقة، مثل transition: background-color 0.3s;، أوضح وغالبًا أرخص على المتصفح من transition: all 0.3s;، التي تراقب كل خاصية في العنصر بحثًا عن تغيّر، حتى ما لم تقصد تحريكه أبدًا.

Try it live / جرّب بنفسك

<button class="btn">Hover me</button>

.btn {
    background-color: navy;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    /* add a transition here */
}

.btn:hover {
    background-color: tomato;
}

Preview / المعاينة

Check yourself / اختبر نفسك

1. Which property controls how long a transition takes?

2. You wrote transition only inside a :hover rule. What happens?

كتبت transition داخل قاعدة :hover فقط. ماذا يحدث؟

3. In transition: background-color 0.3s ease-in-out 0.1s;, what does the last value, 0.1s, set?

في transition: background-color 0.3s ease-in-out 0.1s;، ماذا تضبط القيمة الأخيرة 0.1s؟

Your task / مهمتك

Style a button with a base background color, and a different background color on :hover. Add a transition to the base selector, with a duration of at least 0.2s, so the color animates smoothly in both directions.

صمّم زرًا بلون خلفية أساسي، ولون خلفية مختلف عند :hover. أضف transition إلى المُحدِّد الأساسي، بمدة 0.2 ثانية على الأقل، ليتحرك اللون بسلاسة في الاتجاهين.

transition is set on the base .btn selector, not only inside :hover transition مضبوطة على المُحدِّد الأساسي .btn، لا داخل :hover وحده
The duration is at least 0.2s المدة 0.2 ثانية على الأقل
The background color visibly animates both entering and leaving :hover يتحرك لون الخلفية بوضوح عند الدخول إلى :hover وعند مغادرته