أداة الانتقالات Transitions

Transitions في CSS تحوّل التغيّرات المفاجئة إلى حركات ناعمة لطيفة. فبدل أن يقفز اللون أو الحجم فجأة عند المرور بالماوس، ينتقل بسلاسة خلال مدة تحدّدها أنت. هذه اللمسة الصغيرة هي ما يمنح الواجهات إحساسًا احترافيًا.

هذه الأداة تتيح لك ضبط المدة ودالة التوقيت ومشاهدة الانتقال مباشرة، مع كود CSS جاهز للنسخ.

جرّب بنفسك

الإعدادات

المدة (ms)

Easing

حجم التأثير

CSS الناتج

.btn { transition: ... }

ملاحظة: الأفضل تحدد الخصائص بدل transition: all لتحسين الأداء.

المعاينة

مرّر الفأرة على الزر ثم اضغطه (active) لتلاحظ الفرق

متى تستخدم هذه الخاصية؟

استخدم Transitions عندما تريد نعومة في تفاعلات الواجهة:

تأثيرات المرور بالماوس على الأزرار والروابط
تغيّر الألوان والظلال بسلاسة
فتح وإغلاق القوائم بنعومة

للحركات المعقّدة المتعدّدة المراحل، استخدم أداة الحركات Animations بدلًا منها.

أمثلة عملية

مثال: تغيير لون الزر بنعومة عند المرور عليه.

.btn {
  background: #4f46e5;
  transition: background 0.3s ease;
}
.btn:hover { background: #4338ca; }

غيّر مدة الانتقال ودالة التوقيت في الأداة بالأعلى لتشعر بالفرق بين ease وlinear.