الانتقالات والتحويلات في CSS: transition و transform

الدرس 16 من 19 · CSS

مرّر الفأرة فوق زر في موقع حديث: لونه لا يتبدل فجأة، بل يتغير بنعومة في جزء من الثانية، وقد يرتفع قليلاً. هذه الحركات الصغيرة تجعل الصفحة تبدو حية ومتقنة. وهي تُصنع بخاصيتين: transition تجعل التغيير تدريجياً، و transform تحرك العنصر وتكبّره وتديره. في هذا الدرس ستتعلمهما معاً.

الانتقال: transition

بدون انتقال، يتغير التنسيق فوراً:

.btn {
  background: #5b5bf0;
}
.btn:hover {
  background: #2e2eb8;
}

أضف سطراً واحداً إلى الحالة الأصلية ليصير التغيير تدريجياً:

.btn {
  background: #5b5bf0;
  transition: background 0.3s;
}

الآن يتحول اللون خلال 0.3 ثانية، ذهاباً وعودة.

تخيّل مفتاح النور ومفتاح التعتيم: الأول يضيء المصباح فجأة، والثاني يرفع الضوء تدريجياً. transition تحوّل كل تغيير من النوع الأول إلى الثاني.

أجزاء الانتقال

transition: background 0.3s ease-out 0.1s;

الجزء	معناه
`background`	الخاصية التي تتحرك. و `all` تعني كل الخصائص
`0.3s`	المدة، بالثواني `s` أو الملي ثانية `ms`
`ease-out`	منحنى السرعة
`0.1s`	التأخير قبل البدء. وهو اختياري

ولتحريك أكثر من خاصية، افصل بينها بفاصلة:

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

منحنى السرعة

القيمة	شكل الحركة
`linear`	سرعة ثابتة من البداية إلى النهاية
`ease`	تبدأ ببطء، ثم تسرع، ثم تبطئ. وهي القيمة الافتراضية
`ease-in`	تبدأ ببطء ثم تسرع
`ease-out`	تبدأ سريعة ثم تبطئ
`ease-in-out`	بطيئة في الطرفين

للعناصر التي تستجيب للمستخدم، ease-out هي الأنسب غالباً: تتحرك فوراً فتبدو سريعة الاستجابة، ثم تهدأ.

أي الخصائص تقبل الانتقال؟

التي لها قيم وسيطة: الألوان، والأحجام، والمسافات، والشفافية، والتحويلات. أما display فلا، لأنه لا يوجد شيء في المنتصف بين none و block. ولهذا يُستخدم opacity للظهور التدريجي.

التحويل: transform

transform تغيّر شكل العنصر أو مكانه دون أن تؤثر في جيرانه. العنصر يتحرك بصرياً، ومكانه الأصلي يبقى محجوزاً.

الدالة	ماذا تفعل؟
`translate(x, y)`	تزيح العنصر أفقياً ورأسياً
`translateX()` و `translateY()`	الإزاحة في اتجاه واحد
`scale(n)`	تكبّر أو تصغّر. `1` الحجم الأصلي، و `1.5` مرة ونصف
`rotate(deg)`	تدير العنصر بالدرجات
`skew(deg)`	تُميل العنصر

.lift:hover  { transform: translateY(-4px); }
.zoom:hover  { transform: scale(1.05); }
.icon:hover  { transform: rotate(90deg); }

translateY(-4px): القيمة السالبة ترفع العنصر إلى الأعلى.
rotate(90deg): دورة ربع، في اتجاه عقارب الساعة.

ولتطبيق أكثر من تحويل، اكتبها في السطر نفسه وبينها مسافة:

.card:hover {
  transform: translateY(-6px) scale(1.02);
}

نقطة الارتكاز

الدوران والتكبير يحدثان حول مركز العنصر. وتغيّر ذلك بـ transform-origin:

.door {
  transform-origin: left center;
}
.door:hover {
  transform: rotate(-20deg);
}

الآن العنصر يدور حول حافته اليسرى، مثل باب يدور على مفصلاته.

التوسيط بالتحويل

حيلة قديمة ومشهورة لتوسيط عنصر absolute داخل أبيه:

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top و left تضعان زاوية العنصر في المنتصف، ثم تسحبه translate إلى الخلف بنصف حجمه هو. والسر أن النسبة المئوية في translate تُحسب من حجم العنصر نفسه.

لماذا transform أفضل للحركة؟

تحريك العنصر بتغيير margin أو top يجبر المتصفح على إعادة حساب أماكن كل العناصر حوله في كل لحظة من الحركة. أما transform و opacity فتُنفَّذان بطريقة أخف بكثير. القاعدة: حرّك بـ transform و opacity كلما أمكن، لتبقى الحركة ناعمة حتى على الهواتف الضعيفة.

احترم من لا يريد الحركة

بعض الناس تسبب لهم الحركة دواراً أو صداعاً، ويفعّلون في أجهزتهم خيار «تقليل الحركة». يمكنك أن تحترم اختيارهم:

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

جرّب بنفسك

مرّر الفأرة فوق البطاقة والزر والمربع. ثم غيّر المدة إلى 2s لترى الحركة ببطء، وجرّب linear بدلاً من ease-out:

جرّب بنفسكCSS

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

كتابة transition في حالة hover فقط: الحركة تعمل عند الدخول وتنقطع فجأة عند الخروج. اكتبها في الحالة الأصلية.
مدة طويلة: الحركة الأطول من نصف ثانية تجعل الموقع يبدو بطيئاً. للأزرار والبطاقات، بين 0.15 و 0.3 ثانية.
transition: all: تحرك خصائص لم تقصدها وتثقل الصفحة. سمِّ الخصائص التي تريدها.
محاولة تحريك display: لا يحدث انتقال. استخدم opacity مع visibility.

اختبر نفسك

سؤال

أين تُكتب خاصية transition لتعمل الحركة عند دخول الفأرة وعند خروجها؟

سؤال

ماذا يفعل السطر transform: scale(1.1)؟

الخلاصة

transition تجعل تغيّر الخاصية تدريجياً: الخاصية، ثم المدة، ثم منحنى السرعة.
اكتبها في الحالة الأصلية، واجعل المدة قصيرة.
transform تزيح بـ translate، وتكبّر بـ scale، وتدير بـ rotate، دون تأثير في الجيران.
اجمع التحويلات في خاصية transform واحدة.
للحركة الناعمة حرّك transform و opacity، واحترم خيار تقليل الحركة.

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.