مقارنة بين CSS Transform, Transition, و Animation

أهلاً بك! من الطبيعي جداً الشعور بهذا التشتت في البداية، فالفروقات بينها دقيقة لكنها أساسية.

دعنا نوضح الأمور ببساطة أولاً:

transform (التحويل): هو خاصية (Property). هو يصف "ماذا" ستفعل بالعنصر (تدويره، تكبيره، تحريكه) في لحظة معينة.
transition (الانتقال): هو آلية (Mechanism). هو يصف "كيف" تنتقل من حالة (أ) إلى حالة (ب) بشكل ناعم وسلس.
animation (الرسوم المتحركة): هو آلية (Mechanism). هو يصف "كيف" تنشئ حركة معقدة ومتعددة الخطوات (مثل فيلم قصير).

🌀 `transform`: خاصية التغيير الفوري

transform هي مجرد خاصية CSS مثل color أو font-size. وظيفتها هي تغيير "هيئة" العنصر أو مكانه أو شكله الهندسي.

ماذا يفعل؟ يطبق تغييرات مثل:
- translate(): تحريك العنصر (يمين/يسار/أعلى/أسفل).
- rotate(): تدوير العنصر.
- scale(): تكبير أو تصغير العنصر.
- skew(): إمالة العنصر.
النقطة الأهم: إذا استخدمت transform لوحده، سيحدث التغيير فوراً (بغمضة عين). هو لا يحتوي على أي مفهوم للوقت أو المدة.
مثال: عند تمرير الفأرة (hover) على زر، طبّق transform: scale(1.1). سيقفز الزر لحجمه الجديد فوراً.

⏳ `transition`: آلية الانتقال السلس (بين حالتين)

هنا يبدأ دور "الوقت". transition هو "الجسر" الذي يجعل التغيير بين حالتين سلساً.

ماذا يفعل؟ يراقب خاصية معينة (مثل background-color أو transform). عندما تتغير قيمة هذه الخاصية (بسبب مُحفّز مثل :hover)، فإنه لا يطبق التغيير فوراً، بل يجعله "يتدرج" على مدى فترة زمنية تحددها.
كيف يعمل؟ يحتاج إلى مُحفّز (Trigger). أشهر مُحفّز هو تغير الحالة (مثل :hover أو :focus) أو عند إضافة/إزالة كلاس (Class) باستخدام JavaScript.
مفهومه الأساسي: هو للانتقال من حالة A إلى حالة B بنعومة.
مثال: نفس الزر السابق. إذا أضفت transition: transform 0.3s;، فعند الـ hover، لن "يقفز" الزر، بل "سينمو" بنعومة إلى حجم scale(1.1) خلال 0.3 ثانية.

🎬 `animation`: آلية الرسوم المتحركة (متعددة الخطوات)

هذا هو الخيار الأقوى والأكثر تعقيداً. فكر فيه كأنه "فيلم" قصير له سيناريو محدد.

ماذا يفعل؟ ينشئ حركة معقدة يمكن أن تحتوي على عدة خطوات أو مراحل.
كيف يعمل؟ لا يحتاج بالضرورة لمُحفّز. يمكن أن يعمل تلقائياً عند تحميل الصفحة. أنت تُعرّف "السيناريو" الخاص به باستخدام ما يسمى @keyframes.
@keyframes: هي القواعد التي تحدد شكل العنصر في نقاط زمنية مختلفة (مثلاً: عند 0%، وعند 25%، وعند 100%).
ميزاته القوية:
- التكرار (Loop): يمكن أن تجعله يتكرر 3 مرات، أو بلا نهاية.
- الاتجاه (Direction): يمكن أن يعمل ثم يعود بالعكس.
- التحكم: يمكن إيقافه مؤقتاً أو تشغيله.
مثال: مؤشر تحميل (loading spinner) يدور حول نفسه بلا توقف. لا يوجد "حالة A" و "حالة B" فقط، بل هو سيناريو مستمر: (0% يدور 0 درجة، 100% يدور 360 درجة) ثم يتكرر.

📊 جدول المقارنة

الميزة	`transform` (التحويل)	`transition` (الانتقال)	`animation` (الرسوم المتحركة)
الغرض الأساسي	خاصية لتغيير (تدوير، تكبير...)	آلية لجعل التغيير بين حالتين سلساً	آلية لإنشاء حركة متعددة الخطوات
آلية العمل	تغيير فوري للقيمة (مثل `color: red`)	يراقب خاصية وينعّم تغييرها	يتبع "سيناريو" مُعرف بـ `@keyframes`
المُحفّز (Trigger)	لا يوجد (هو مجرد خاصية تُطبّق)	مطلوب غالباً (مثل `:hover` أو JS)	اختياري (يمكن أن يعمل تلقائياً)
التحكم بالخطوات	خطوة واحدة (الحالة النهائية)	خطوتين (بداية ونهاية)	خطوات متعددة (0%, 25%, 100%...)
التكرار (Looping)	لا	لا (يحدث مرة واحدة عند كل تغيير)	نعم (يمكن تكراره بلا نهاية)

🤝 الخلاصة: كيف يعملون معاً؟

هنا يزول اللبس تماماً:

transform هو "ماذا" ستغير. (مثال: transform: rotate(45deg)).
transition هو "كيف" ستجعل هذا التغيير سلساً. (مثال: "عند الـ hover، اجعل التغيير إلى transform: rotate(45deg) يستغرق نصف ثانية").
animation هو "كيف" ستخلق فيلماً من هذا التغيير. (مثال: "ابدأ بـ transform: rotate(0deg)، ثم بعد ثانية اجعله rotate(45deg)، ثم بعد ثانية أخرى اجعله rotate(-45deg)، وكرر هذا 5 مرات").

السيناريو الأكثر شيوعاً للمبتدئين:
أنت تستخدم transition لعمل "انتقال ناعم" لخاصية transform (أو لخاصية background-color، opacity ...إلخ).

أتمنى أن يكون هذا الشرح قد أزال التشتت.

هل ترغب في الحصول على أمثلة كود بسيطة (Code Snippets) توضح الفرق بين الثلاثة عملياً؟