شرح transitions في CSS — كيف تضيف حركة ناعمة للعناصر؟

خاصية transition في CSS تحوّل التغييرات الحادة إلى حركة ناعمة. تُستخدم كثيراً في الأزرار، البطاقات، والروابط.

إذا كنت تبحث عن شرح transition في CSS أو hover effect ناعم أو الفرق بين transitions و animations، فهذا الدرس يشرحها بشكل عملي.

ما هي CSS Transitions؟

عند تغير خاصية مثل اللون أو الحجم، يحدث التغيير مباشرة بشكل مفاجئ. باستخدام transition يصبح التغيير تدريجياً خلال زمن محدد.

التعريف البسيط: transitions in CSS تجعل الانتقال بين حالتين (مثل normal و hover) سلساً.

صيغة transition في CSS

transition: property duration timing-function delay;

شرح قيم Transition في CSS

• property: الخاصية التي تتحرك مثل background-color أو transform.
• duration: مدة الحركة مثل 0.3s.
• timing-function: شكل السرعة مثل ease و linear.
• delay: تأخير بداية الحركة (اختياري).

كيفية استخدام transition في CSS

تجربة زر بسيط

.btn-smooth {
    background-color: #0d6efd;
    transition: background-color 0.3s ease;
}

.btn-smooth:hover {
    background-color: #198754;
}

ماذا يفعل هذا الكود؟ يجعل تغير لون الزر ناعماً عند hover.

النتيجة المتوقعة: تفاعل بصري أنعم وأكثر احترافية.

خطأ شائع: وضع transition داخل :hover فقط.

تحريك البطاقة عند المرور (Card Hover)

.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

ماذا يفعل هذا الكود؟ يرفع البطاقة قليلاً ويضيف لها ظلاً عند hover.

النتيجة المتوقعة: واجهة أكثر حيوية وتفاعل.

خطأ شائع: استخدام حركة كبيرة فتبدو مزعجة للمستخدم.

Transition متعددة الخصائص في CSS

.multi-box {
    transition: background-color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;
}

.multi-box:hover {
    background-color: #ffc107;
    border-radius: 28px;
    transform: rotate(2deg);
}

ماذا يفعل هذا الكود؟ يحرك اللون والشكل والدوران في نفس الوقت.

النتيجة المتوقعة: تأثير غني لكن يحتاج اعتدال.

خطأ شائع: تحريك خصائص كثيرة جداً في عنصر واحد.

متى أستخدم transitions ومتى أستخدم animations؟

• استخدم transition عندما يكون لديك حالتان فقط (normal / hover).
• استخدم animation للحركات المعقدة متعددة المراحل عبر keyframes.
• لواجهات UI اليومية، transitions غالباً أبسط وأفضل.

أخطاء شائعة في CSS Transitions

١) مدة طويلة جداً: تجعل الواجهة بطيئة.

٢) transition: all بلا حاجة: قد يسبب تحريك خصائص لا تريدها.

٣) عدم احترام تفضيلات الحركة: بعض المستخدمين يفضلون تقليل الحركة.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي CSS transitions؟

ميزة في CSS تجعل تغير الخصائص يحدث تدريجياً خلال مدة زمنية بدل التغير الفوري.

كيف أعمل hover effect ناعم في CSS؟

ضع transition في العنصر الأساسي ثم غيّر الخاصية داخل :hover.

ما أفضل مدة transition في CSS؟

غالباً بين 0.2s و0.35s حسب نوع العنصر.

ما الفرق بين transitions و animations؟

transitions مناسبة للانتقال بين حالتين، بينما animations تدعم سيناريوهات متعددة عبر keyframes.

هل يمكن تحريك أكثر من خاصية في transition واحدة؟

نعم، يمكنك فصل الخصائص بفاصلة مثل transform وbox-shadow.